Kirjeldage CSS-is pseudosklasse ja pseudelemente…

Pseudosklasid ja pseidoelemendid laiendavad CSS valiku võimalusi, võimaldades rakendada stiile elementidele nende oleku, asukoha või muude omaduste põhjal, mida ei saa väljendada lihtsate valikutega.

Pseudosklasid

Pseudosklasid algavad ühe kahekordse kooloniga (:). Neid kasutatakse elementide stiilimiseks kindlas olekus.

Peamised pseudosklasid:

:hover - stiilib elementi, kui hiir on selle kohal.
:active - stiilib elementi, kui see on aktiivne (klõpsatud).
:focus - stiilib elementi, mis on praegu fookuses (näiteks lingil klõpsamise või sisestusvälja valimise järel).
:visited - stiilib külastatud linki.
:link - stiilib mitte-külastatud linki.
:first-child - stiilib oma vanema esimese lapse.
:last-child - stiilib oma vanema viimase lapse.
:nth-child(n) - stiilib n-ndat last oma vanemal. n võib olla arv, märksõna (even, odd) või avaldis (2n+1).
:nth-last-child(n) - stiilib n-ndat last oma vanemast, lugedes tagant.
:not(selector) - stiilib elemente, mis ei vasta määratud valikule.

/* Näide pseudosklaside kasutamisest */
a:hover {
  color: blue; // Muudab lingi värvi, kui hiir on selle kohal
}

input:focus {
  border-color: green; // Muudab sisestusvälja äärise värvi fokuses
}

li:first-child {
  font-weight: bold; // Esimese loendi elemendi stiil
}

Pseidoelemendid

Pseidoelemendid algavad topeltkooloniga (::). Neid kasutatakse kindla osa elementist stiilimiseks või genereeritud sisu lisamiseks enne või pärast elementide sisu.

Peamised pseidoelemendid:

::before - lisab genereeritud sisu enne elemendi sisu. Sageli kasutatakse content omadusega.
::after - lisab genereeritud sisu pärast elemendi sisu. Samuti nõuab content omadust.
::first-letter - stiilib esimese tähe tekstiblokist.
::first-line - stiilib esimese rea tekstiblokist.
::selection - stiilib osa elementist, mis on kasutaja poolt valitud.

/* Näide pseidoelementide kasutamisest */
p::first-letter {
  font-size: 2em; // Esimese tähe suurendamine
  font-weight: bold;
}

h2::after {
  content: " ---"; // Teksti lisamine pärast pealkirja
  color: gray;
}

mark::selection {
  background-color: yellow; // Valitud teksti tausta värvi muutmine
  color: black;
}

Ajalooliselt kasutasid pseudosklasid ühe kahekordse kooloni (:) CSS2.1 ühilduvuse jaoks, samas kui pseidoelemendid CSS3-st kasutavad topeltkooloni (::) parema eristamise jaoks. Soovitatav on kasutada topeltkooloni pseidoelementidele kaasaegses koodis.

Võrdlustabel:

Omadus	Pseidosklas	Pseidoelement
Süntaks	`:selector`	`::selector`
Otstarve	Elementi olek	Osa elemendist või genereeritud sisu
Näited	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

Kirjeldage CSS-is pseudosklasse ja pseudelemente.