Elemek állapotai
Amikor egy felhasználó meglátogat egy weboldalt, különféle módokon interakcióba lép vele: ráviszi az egerét egyes menüpontokra, vagy belekattint egy szövegmezőbe. Ezek az interakciók az oldal tényleges felépítését általában nem változtatják meg (bár ilyen is előfordul), azonban megváltoztathatják egyes elemek állapotát, amit a megfelelő CSS szelektorok segítségével a formázásainkkal is lekövethetünk.
Ha szeretnénk a CSS szelektorunkban állapotot is meghatározni, nincs más dolgunk, mint a szelektor megfelelő eleméhez hozzáfűzni egy kettőspontot, majd az állapot nevét, például így: a:hover. Vannak olyan állapotok, amiket bármely HTML elem fel tud venni az oldalunkon, és vannak olyanok is, amelyek csak bizonyos elemekre értelmezhetőek.
Általános állapotok
- :hover Az elem akkor kerül hover állapotba, ha a felhasználó rámutat az egérrel, de nem kattint rá. Tehát a kurzor az elem felett van, de az egér egyik gombja sincs lenyomva.
- :active Az elem akkor kerül active állapotba, ha a felhasználó éppen kattint rá az elemre, tehát az egérgomb épp le van nyomva az elemen.
- :focus Az elem akkor van focus állapotban, ha épp az adott elem van fókuszálva az oldalon. Ehhez nem kell, hogy rajta legyen az egér, fókuszba kerülhet tabulátorral is, vagy akár szkript által is. Alapból csak bizonyos elemek (hivatkozások, űrlapmezők, gombok) tudnak fókuszálva lenni, azonban némi kódbeli varázslattal bármilyen elemet fókuszálhatóvá tehetünk.
- :target Az elem akkor kerül target állapotban, ha az aktuális oldal címében, oldalon belüli hivatkozás segítségével az adott elemre hivatkoztunk (lásd: HTML -> Hivatkozások).
Ezeken az állapotokon kívül gyakran használjuk az alábbi állapotokat is, noha ezek csak bizonyos elemek esetén értelmezhetőek:
- :visited Csak hivatkozás esetén létezik, az adott hivatkozás akkor van visited állapotban, ha olyan webcímre mutat, amit a felhasználó már felkeresett.
- :checked Csak jelölőnégyzetekre és rádiógombokra értelmezhető, az adott vezérlő akkor kerül checked állapotban, ha épp be van jelölve (tehát be van pipálva/"pöttyözve")
- :disabled Csak űrlapelemekre értelmezhető, az adott vezérlő akkor van disabled állapotban, ha - akár HTML kódból, akár JavaScript-ből - letiltásra, kikapcsolásra került
- :enabled Csak űrlapelemekre értelmezhető, a :disabled állapot ellentéte.