Pseudo-clase (:hover, :focus, :active, :nth-child) în CSS

a:hover { text-decoration: underline; }
button:active { transform: scale(0.98); }
input:focus { border-color: blue; }
li:nth-child(even) { background: #f1f5f9; }

Ce face Pseudo-clase (:hover, :focus, :active, :nth-child)

Pseudo-clasele încep cu două puncte (:) și permit aplicarea stilurilor în funcție de acțiunile utilizatorului sau starea elementului.

Cele mai importante:
• :hover: când cursorul mouse-ului plutește deasupra elementului.
• :focus / :focus-visible: când elementul este selectat prin clic sau navigare cu tasta Tab.
• :active: în momentul precis al apăsării butonului de mouse.
• :disabled: când un câmp de formular este inactiv.
• :nth-child(n): selectează elemente pe baza unei formule (ex. rânduri pare even pentru tabele vărgate).

Valori uzuale

Valoare	Descriere
:hover	Starea când mouse-ul trece peste element.
:focus	Starea când elementul primește focus de la tastatură sau clic.
:active	Starea în timpul apăsării efective a clicului.
:nth-child()	Selectează al n-lea element (ex. :first-child, :last-child, :nth-child(2n)).
:not()	Negare: selectează elementele care NU corespund selectorului din paranteză.

Exemple

Exemplul 1: Efect de interacțiune fluid pe buton și rânduri de tabel vărgate

Schimbă culoarea la hover și oferă feedback vizual la clic.

button {
  background: #2563eb;
  color: white;
  transition: background 0.2s;
}
button:hover {
  background: #1d4ed8;
}
button:active {
  background: #1e40af;
}

/* Rânduri alternative gri pentru tabele */
tr:nth-child(even) {
  background-color: #f8fafc;
}

Efect vizual în browser

La trecerea cu mouse-ul peste buton, albastrul se întunecă fin; la clic se întunecă și mai mult. Rândurile pare din tabel au fundal gri-deschis.

Greșeli frecvente

• Eliminarea outline-ului la focus (outline: none) fără a oferi un stil vizual alternativ; acest lucru distruge navigarea din tastatură pentru persoanele cu dizabilități motorii sau vizuale.
• Ordinea greșită a regulilor pentru linkuri (regula LVHA: :link, :visited, :hover, :active).

Comenzi înrudite

• Pseudo-elemente (::before, ::after, ::placeholder): Creează elemente decorative virtuale în pagină fără HTML suplimentar sau stilizează părți specifice ale unui element.
• Selectori de bază (element, clasă, id): Mecanismul prin care CSS identifică elementele din HTML cărora le aplică stilurile.