Descriează pseudo-clasele și pseudo-elementele în…

Pseudo-clasele și pseudo-elementele extind capacitățile selectorilor CSS, permițând aplicarea de stiluri pe baza stării, poziției sau altor caracteristici ale elementelor care nu pot fi exprimate cu selectori simpli.

Pseudo-clase

Pseudo-clasele încep cu două puncte (:). Ele sunt folosite pentru a stiliza un element într-o stare specifică.

Principalele pseudo-clase:

:hover - stilizează elementul la trecerea cursorului peste el.
:active - stilizează elementul în timpul clicului (activare).
:focus - stilizează elementul care are în prezent focusul (de exemplu, după clic pe un link sau pe un câmp de introducere).
:visited - stilizează linkurile vizitate.
:link - stilizează linkurile nevizitate.
:first-child - stilizează primul copil al părintelui său.
:last-child - stilizează ultimul copil al părintelui său.
:nth-child(n) - stilizează al n-lea copil al părintelui său. n poate fi un număr, un cuvânt cheie (even, odd) sau o expresie (2n+1).
:nth-last-child(n) - stilizează al n-lea copil de la sfârșit.
:not(selector) - stilizează elementele care nu corespund selectorului specificat.

/* Exemplu de utilizare a pseudo-claselor */
a:hover {
  color: blue; /* Schimbă culoarea linkului la trecerea cursorului */
}

input:focus {
  border-color: green; /* Schimbă culoarea marginii câmpului de introducere la focus */
}

li:first-child {
  font-weight: bold; /* Stilizează primul element din listă */
}

Pseudo-elemente

Pseudo-elementele încep cu două puncte duble (::). Ele sunt folosite pentru a stiliza o parte specifică a unui element sau pentru a insera conținut generat înainte sau după conținutul elementului.

Principalele pseudo-elemente:

::before - inserează conținut generat înainte de conținutul elementului. Adesea folosit cu proprietatea content.
::after - inserează conținut generat după conținutul elementului. Necesită și proprietatea content.
::first-letter - stilizează prima literă a blocului de text.
::first-line - stilizează prima linie a blocului de text.
::selection - stilizează partea elementului selectată de utilizator.

/* Exemplu de utilizare a pseudo-elementelor */
p::first-letter {
  font-size: 2em; /* Mărește prima literă a paragrafului */
  font-weight: bold;
}

h2::after {
  content: " ---"; /* Adaugă text după titlu */
  color: gray;
}

mark::selection {
  background-color: yellow; /* Schimbă fundalul textului selectat */
  color: black;
}

Istoric, pseudo-clasele foloseau un singur două puncte (:) pentru compatibilitate cu CSS2.1, în timp ce pseudo-elementele în CSS3 au început să folosească două puncte (::) pentru o diferențiere mai bună. Se recomandă utilizarea dublului două puncte pentru pseudo-elemente în codul modern.

Tabel comparativ:

Caracteristică	Pseudo-clasă	Pseudo-element
Sintaxă	`:selector`	`::selector`
Scop	Stare a elementului	Parte a elementului sau conținut generat
Exemple	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

Descriează pseudo-clasele și pseudo-elementele în CSS.