Ce sunt pseudo-clasele în CSS?

Pseudo-clasele în CSS sunt cuvinte cheie adăugate selectorilor pentru a indica o stare specială a elementului. Ele permit aplicarea de stiluri pe baza interacțiunii utilizatorului, poziției în structura documentului sau altor caracteristici care nu pot fi exprimate cu selectori standard.

Exemple de pseudo-clase:

• Stări ale utilizatorului:

  • :hover - elementul peste care se află cursorul mouse-ului.
  • :active - elementul care devine activ (de exemplu, un buton apăsat).
  • :focus - elementul care are focus de input (de exemplu, un câmp de text).
  • :visited - link-ul pe care utilizatorul l-a vizitat deja.
  • :link - link-ul pe care utilizatorul nu l-a vizitat încă.

• Poziția în structură:

  • :first-child - primul copil al părintelui.
  • :last-child - ultimul copil al părintelui.
  • :nth-child(n) - n-ulea copil al părintelui.
  • :first-of-type - primul element de tipul său printre copii.
  • :last-of-type - ultimul element de tipul său printre copii.

• Altele:

  • :empty - element fără copii sau text.
  • :not(selector) - elemente care nu corespund selectorului indicat.

Sintaxă:

selector:pseudo-class {
  property: value;
}

Exemplu de utilizare:

/* Schimbă culoarea textului la trecerea mouse-ului peste un paragraf */
p:hover {
  color: blue;
}

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

Pseudo-clasele extind capacitățile selectorilor, permițând crearea unor interfețe mai dinamice și interactive fără a folosi JavaScript pentru modificări simple de stil.