Pseudoelement och pseudoklasser i CSS

Klasser och element som du inte har skrivit

Pseudo betyder ju att något är falskt, inte riktigt riktigt, fejk. Alltså är en pseudoklass inte en vanlig klass som du skriver in i en tagg med attributet class, den bara finns där ändå, utan att du behöver göra någonting. En pseudoklass beskriver ett tillstånd ett element är i. Ett bra exempel är till exempel :hover som gäller om muspekaren befinner sig ovanför elementet eller :active, som gäller när användaren klickar på elementet.

Pseudoelement är liknande, men handlar om var ett element befinner sig i koden. ett exempel är ::after som kommer att gälla för det element som är kommer efter elementet som tilldelats pseudoelementet.

För att markera att det du sḱriver i din CSS är ett pseudoelement, eller en pseudoklass använder du kolon (:) på samma sätt som du använder punkt (.) för att markera en klass eller nummertecken (#) för att markera ett id.

I äldre CSS-versioner användes ett enkelt kolon (:) för att markera både pseudoelement och pseudoklasser. I CSS3 har systemet med pseudoklasser och -element byggts ut en hel del, så man har valt att skilja pseudoklasser och pseudoelement åt genom att använda dubbla kolon (::) för att markera pseudoelement och enkla (:) för pseudoklasser.

Tidigare gällde alltid enkla (:). Detta innebär att även felskrivningar ofta fungerar i webbläsare, men eftersom det är ändrat, och nya pseudoelement och -klasser tillkommit så är det alltid säkrast att hålla sig till korrekt CSS3-syntax och skilja på : och ::

Det finns läsa om hos W3C. Det finns massor, som jag inte går in i detalj på i den här texten.

För att märka ut att det är frågan om en pseudoklass använder man ett vanligt kolon (:) i sin CSS-väljare på samma sätt du avänder en punkt, när det är frågan om en vanlig klass.

Några exempel på tilllämpning av pseudoklasser

a:link {}: En länk som är obesökt
a:visited{}: En besökt länk
a:hover {}: En länk, när markören är över den
a:active {}: En länk, när den klickas

Exempel på pseudoelement

::first-line: Den första raden text
::first-letter: Den första bokstaven eller siffran
::before: Gäller för det som kommer före det aktuella elementet
::after: Gäller för det som kommer efter det aktuella elementet

Naturligtvis kan du använda dig av ovanståenda pseudoklasser till vilket element du vill, även om de passar bra till just <a>. Du kan också, precis som när det gäller vanliga klasser och id, använda dig av bara en pseudoklass som väljare. Du kan läsa mer om kombinerade väljare här.

du kan läsa mer hos W3C eller testa på W3Schools (artikeln innan den handlar om pseudoklasser).