Aprakstiet pseido-klases un pseido-elementus CSS…

Pseido-klases un pseido-elementi paplašina CSS selektoru iespējas, ļaujot piemērot stilus elementiem atkarībā no to stāvokļa, novietojuma vai citām īpašībām, kuras nevar izteikt ar vienkāršiem selektoriem.

Pseido-klases

Pseido-klases sākas ar vienu divpunkti (:). Tās tiek izmantotas, lai stilizētu elementu noteiktā stāvoklī.

Galvenās pseido-klases:

:hover - stilizē elementu, kad kursors ir virs tā.
:active - stilizē elementu, kad tas ir aktivizēts (noklikšķināts).
:focus - stilizē elementu, kurš pašlaik ir fokusā (piemēram, pēc saites noklikšķināšanas vai ievades lauka aktivizēšanas).
:visited - stilizē apmeklētu saiti.
:link - stilizē neapmeklētu saiti.
:first-child - stilizē pirmo bērnu savam vecākam.
:last-child - stilizē pēdējo bērnu savam vecākam.
:nth-child(n) - stilizē n-tā bērnu savam vecākam. n var būt skaitlis, atslēgvārds (even, odd) vai izteiksme (2n+1).
:nth-last-child(n) - stilizē n-tā bērnu no beigām.
:not(selector) - stilizē elementus, kas neatbilst norādītajam selektoram.

/* Piemērs, kā izmantot pseido-klases */
a:hover {
  color: blue; // Saite maina krāsu, kad virs tās ir kursors
}

input:focus {
  border-color: green; // Ievades lauka rāmja krāsa, kad tas ir fokusā
}

li:first-child {
  font-weight: bold; // Pirmā saraksta elementa stilizācija
}

Pseido-elementi

Pseido-elementi sākas ar dubultu divpunkti (::). Tie tiek izmantoti, lai stilizētu noteiktu elementa daļu vai ievietotu ģenerētu saturu pirms vai pēc elementa satura.

Galvenie pseido-elementi:

::before - ievieto ģenerētu saturu pirms elementa satura. Bieži tiek izmantots ar content īpašību.
::after - ievieto ģenerētu saturu pēc elementa satura. Arī prasa content īpašību.
::first-letter - stilizē pirmo burtu teksta blokā.
::first-line - stilizē pirmo teksta rindu.
::selection - stilizē daļu no elementa, kas ir atlasīta lietotāja.

/* Piemērs, kā izmantot pseido-elementus */
p::first-letter {
  font-size: 2em; // Pirmā burta palielināšana
  font-weight: bold;
}

h2::after {
  content: " ---"; // Teksta pievienošana pēc virsraksta
  color: gray;
}

mark::selection {
  background-color: yellow; // Fona krāsas maiņa atlasītajam tekstam
  color: black;
}

Vēsturiski pseido-klases izmantoja vienu divpunkti (:) CSS2.1 saderībai, kamēr pseido-elementi CSS3 kļuva par dubultu divpunkti (::) atšķirības skaidrībai. Ieteicams izmantot dubultu divpunkti pseido-elementiem mūsdienu kodā.

Salīdzināšanas tabula:

Īpašība	Pseido-klase	Pseido-elementi
Sintakse	`:selector`	`::selector`
Mērķis	Elementa stāvoklis	Elementa daļa vai ģenerēts saturs
Piemēri	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

Aprakstiet pseido-klases un pseido-elementus CSS.