CSS Pszeudo-osztályok

CSS Attribútum Szelektorok CSS Pszeudo-elemek

A pszeudo-osztályok lehetővé teszik, hogy egy elem különböző állapotait célozzuk meg. Például amikor fölé visszük az egeret, amikor fókuszba kerül, vagy amikor az elem a szülőn belül elsőként jelenik meg.

Mi az a pszeudo-osztály?

A pszeudo-osztályokat kettősponttal (:) jelöljük, és olyan állapotokat, pozíciókat vagy különleges eseteket célozhatunk velük, amelyeket normál attribútumokkal nem tudnánk elérni.

Pseudo-class	Leírás
:hover	Alkalmazás akkor, amikor az egér az elem fölé kerül.
:focus	Alkalmazás, amikor az elem (pl. input mező) fókuszba kerül.
:nth-child()	Meghatározott sorszámú gyermek elem kiválasztása.
:first-child	A szülő első gyermekének kiválasztása.
:last-child	A szülő utolsó gyermekének kiválasztása.

Interaktív pszeudo-osztályok

Ezekkel a pszeudo-osztályokkal interakciókra reagálhatunk, például ha egy link fölé viszik az egeret, vagy egy input mezőre kattintanak.

Az alábbi példában egy link színe pirosra vált hover esetén, míg a szövegmező fókuszba kerülve zöld szegélyt kap.

Strukturális pszeudo-osztályok

A strukturális pszeudo-osztályok az elem helyzetére vonatkoznak a szülőn belül. Így egyszerűen formázhatjuk az első, utolsó vagy meghatározott sorszámú elemet.

Tippek pszeudo-osztályok használatához

A pszeudo-osztályok megkönnyítik az állapot- és struktúraalapú formázást. Íme néhány tanács:

Használd a :hover és :focus szelektorokat a jobb felhasználói élmény érdekében.
A strukturális pszeudo-osztályokkal elkerülheted a felesleges extra osztályok hozzáadását a HTML-ben.
Kerüld a túlzottan bonyolult :nth-child() szabályokat a kód átláthatósága érdekében.