CSS pszeudo szelektorok

A CSS pszeudo szelektorok több változatát különböztetjük meg. Egyrészt vannak a mindenki által ismert általános pszeudo osztályok, például a :hover vagy a :focus, amivel a linkek különböző állapotát tudjuk kiszelektálni, vagy a :first-child és :last-child amely egy konténer elem leszármazottjainak első illetve utolsó elemét (gyerekét) hivatott megtalálni. Ezt használhatjuk például egy számozatlan lista első és utolsó <li> elemének megtalálására.

Másrészt vannak az úgynevezett pszeudo elemek, amiket dupla kettősponttal jelölünk a HTML elem neve után. Ilyenek például a videóban is szereplő ::before és az ::after. Ezekkel egy adott HTML elé és/vagy mögé helyezhetünk el tartalmat, vagy valamilyen grafikus elemet. Tipikus példája a felhasználásnak amikor egyedi kinézetű felsorolásjelet akarunk létrehozni. Ilyenkor az <li> tagekről levesszük a default felsorolásjelet és a ::before segítségével egyedi ikont teszünk ki.

forráskód

CSS pszeudo szelektorok videó