CSS Pszeudo-osztályok
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.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
© 2025 ReadyTools. Minden jog fenntartva.