Aprašykite pseudoklases ir pseudoelementus CSS…

Pseudo-klasės ir pseudo-elementai plečia CSS selektorių galimybes, leidžia taikyti stilių elementams jų būsenos, padėties ar kitų savybių pagrindu, kurios negali būti išreiškiamos paprastais selektoriais.

Pseudo-klasės

Pseudo-klasės prasideda vienu dvigubu tašku (:). Jos naudojamos elementui stilizuoti tam tikroje būsenoje.

Pagrindinės pseudo-klasės:

:hover - stilizuoja elementą, kai pelės žymeklis yra virš jo.
:active - stilizuoja elementą, kai jis yra aktyvus (pvz., paspaustas).
:focus - stilizuoja elementą, kuris šiuo metu yra dėmesio centre.
:visited - stilizuoja lankytą nuorodą.
:link - stilizuoja nelankomą nuorodą.
:first-child - stilizuoja pirmą vaiką.
:last-child - stilizuoja paskutinį vaiką.
:nth-child(n) - stilizuoja n-tą vaiką.
:nth-last-child(n) - stilizuoja n-tą vaiką nuo pabaigos.
:not(selector) - stilizuoja elementus, kurie neatitinka nurodyto selektoriaus.

/* Pavyzdys pseudo-klasių naudojimo */
a:hover {
  color: blue; // Nuorodos spalvos keitimas, kai pelės žymeklis virš jos
}

input:focus {
  border-color: green; // Rėmelio spalvos keitimas, kai elementas yra dėmesio centre
}

li:first-child {
  font-weight: bold; // Pirmo sąrašo elemento stilizavimas
}

Pseudo-elementai

Pseudo-elementai prasideda dviem dvigubais taškais (::). Jie naudojami stilizuoti tam tikrą elemento dalį arba įterpti generuotą turinį prieš ar po elemento turinio.

Pagrindiniai pseudo-elementai:

::before - įterpia generuotą turinį prieš elemento turinį.
::after - įterpia generuotą turinį po elemento turinio.
::first-letter - stilizuoja pirmą raidę.
::first-line - stilizuoja pirmą eilutę.
::selection - stilizuoja pasirinktą dalį.

/* Pavyzdys pseudo-elementų naudojimo */
p::first-letter {
  font-size: 2em; // Pirmos raidės padidinimas
  font-weight: bold;
}

h2::after {
  content: " ---"; // Teksto pridėjimas po antraštės
  color: gray;
}

mark::selection {
  background-color: yellow; // Pasirinkto teksto fono keitimas
  color: black;
}

Istoriškai, pseudo-klasės naudojo vieną dvigubą tašką (:) CSS2.1 suderinamumo tikslais, o pseudo-elementai CSS3 pradėjo naudoti dvigubą tašką (::) geresniam atskyrimui. Rekomenduojama naudoti dvigubą tašką pseudo-elementams šiuolaikiniame kode.

Lyginamoji lentelė:

Savybė	Pseudo-klasė	Pseudo-elementas
Sintaksė	`:selector`	`::selector`
Paskirtis	Elemento būsena	Elemento dalis arba generuotas turinys

Aprašykite pseudoklases ir pseudoelementus CSS.