Junior
Mis on pseudo-klassid CSS-is?
sobes.tech AI
Vastus AI-lt
CSS pseudosugulased on võtmesõnad, mis lisatakse selektoritele, et näidata elemendi erilist olekut. Need võimaldavad rakendada stiile elementidele nende kasutamise, dokumendi struktuuri positsiooni või muude omaduste põhjal, mida ei saa väljendada tavaliste selektoritega.
Pseudosugulaste näited:
-
Kasutaja olekud:
:hover- element, mille kohal on hiirekursor.:active- element, mis aktiveeritakse (näiteks hiireklõps).:focus- sisendelement, millele on fookus (näiteks tekstiväli).:visited- link, mida kasutaja on juba külastanud.:link- link, mida kasutaja pole veel külastanud.
-
Struktuuri positsioon:
:first-child- esimene oma vanema laps.:last-child- viimane oma vanema laps.:nth-child(n)- n-nes oma vanema laps.:first-of-type- esimene oma tüüpi element lastide seas.:last-of-type- viimane oma tüüpi element lastide seas.
-
Muud:
:empty- element, mis ei sisalda lapsi ega teksti.:not(selector)- elemendid, mis ei vasta määratud selektorile.
Süntaks:
selector:pseudo-class {
property: value;
}
Näide kasutamisest:
/* Teksti värvi muutmine, kui hiirekursor on lõigu kohal */
p:hover {
color: blue;
}
/* Stiil esimesele loendi elemendile */
li:first-child {
font-weight: bold;
}
Pseudosugulased laiendavad selektorite võimalusi, võimaldades luua dünaamilisemaid ja interaktiivsemaid kasutajaliideseid ilma JavaScripti kasutamata, lihtsate stiilimuudatuste abil.