Pseudoclase CSS

Ce sunt pseudoclasele

Pseudoclasele CSS sunt extensii ale selectorilor care permit aplicarea de stiluri în funcție de starea, poziția sau conținutul unui element, fără a modifica HTML-ul.

Categorii de pseudoclase

De interacțiune: :hover, :focus, :active, :visited, :checked, :link
De structură: :first-child, :last-child, :nth-child(), :nth-of-type(), :only-child, :not(), :empty
De stare: :disabled, :enabled, :target, :valid, :invalid, :required, :optional
Avansate: :has(), :is(), :where()

:hover

Descriere: Selectează elementul când utilizatorul trece cu mouse-ul peste el.

Utilizare: Se folosește frecvent pentru efecte vizuale, cum ar fi schimbarea culorii sau afișarea unui meniu.

Compatibilitate: Funcționează pe majoritatea elementelor, dar este cel mai des aplicat pe linkuri, butoane sau imagini.

Exemplu: Când treci cu mouse-ul peste linkul de mai jos, culoarea se schimbă.

🔧 Exemplu: :hover

<a href="#">Link interactiv</a>

a {
  color: navy;
  text-decoration: none;
}
a:hover {
  color: crimson;
  text-decoration: underline;
}

:focus

Descriere: Se aplică când un element primește focus, de obicei prin click sau navigare cu tastatura (Tab).

Utilizare: Este util pentru a evidenția câmpurile de formular active.

Compatibilitate: Se aplică pe elemente care pot fi focusate: input, textarea, button, link.

Exemplu: Când dai click pe inputul de mai jos, se schimbă stilul.

🔧 Exemplu: :focus

<input type="text" placeholder="Scrie aici">

input:focus {
  border: 2px solid royalblue;
  background-color: #eef;
  outline: none;
}

:active

Descriere: Se aplică în momentul în care un element este activat, adică în timp ce este apăsat.

Utilizare: Poți crea efecte vizuale pentru butoane sau linkuri în momentul interacțiunii.

Compatibilitate: Funcționează pe elemente interactive: butoane, linkuri, inputuri.

Exemplu: Apasă pe butonul de mai jos și observă schimbarea.

🔧 Exemplu: :active

<button>Apasă</button>

button:active {
  background-color: darkgray;
  transform: scale(0.98);
}

:visited

Descriere: Se aplică pe linkuri care au fost deja accesate de utilizator.

Utilizare: Este util pentru a diferenția vizual linkurile vizitate de cele nevizitate.

Compatibilitate: Se aplică doar pe elemente <a> cu atribut href.

Exemplu: După ce accesezi linkul de mai jos, culoarea se va schimba.

🔧 Exemplu: :visited

<a href="https://example.com" target="_blank">Vizitează acest link</a>

a:visited {
  color: purple;
}

:checked

Descriere: Se aplică pe elemente de tip checkbox sau radio care sunt bifate.

Utilizare: Este folosit pentru a stiliza elementele selectate în formulare.

Compatibilitate: Se aplică pe <input type="checkbox"> și <input type="radio">.

Exemplu: Când bifezi caseta de mai jos, se schimbă stilul.

🔧 Exemplu: :checked

<label><input type="checkbox"> Bifează-mă</label>

input:checked {
  accent-color: green;
}

:link

Descriere: Se aplică pe linkuri care nu au fost încă accesate de utilizator.

Utilizare: Este folosit pentru a stiliza linkurile nevizitate, oferind un aspect distinct față de cele deja accesate.

Compatibilitate: Se aplică doar pe elemente <a> cu atribut href.

Exemplu: Linkul de mai jos va avea un stil diferit până când este accesat.

🔧 Exemplu: :link

<a href="https://example.com" target="_blank">Accesează acest link</a>

a:link {
  color: blue;
  text-decoration: underline;
}

Pseudo-clasele de structură

Pseudo-clasele de structură permit selectarea elementelor în funcție de poziția lor în arborele DOM sau de relația cu alte elemente. Sunt utile pentru a aplica stiluri fără a modifica HTML-ul, bazându-te doar pe poziționare și tipologie.

:first-child

Descriere: Selectează primul copil al unui element părinte.

Utilizare: Este util pentru a evidenția sau stiliza primul element dintr-o listă, secțiune sau grup.

Compatibilitate: Funcționează pe orice element care este primul copil în cadrul părintelui său.

Exemplu: Primul paragraf din containerul de mai jos va fi evidențiat.

🔧 Exemplu: :first-child

<div>
  <p>Primul paragraf<p>
  <p>Al doilea paragraf<p>
</div>

div p:first-child {
  color: red;
  font-weight: bold;
}

:last-child

Descriere: Selectează ultimul copil al unui element părinte.

Utilizare: Este util pentru a aplica stiluri speciale ultimului element dintr-un grup, listă sau secțiune.

Compatibilitate: Funcționează pe orice element care este ultimul copil în cadrul părintelui său.

Exemplu: Ultimul paragraf din containerul de mai jos va fi evidențiat.

🔧 Exemplu: :last-child

<div>
  <p>Primul paragraf<p>
  <p>Al doilea paragraf<p>
  <p>Ultimul paragraf<p>
</div>

div p:last-child {
  color: green;
  font-style: italic;
}

:nth-child()

Descriere: Selectează elementele aflate pe o anumită poziție în cadrul părintelui, pe baza unui index numeric sau expresie.

Utilizare: Este extrem de flexibil — poți selecta al doilea element, fiecare al treilea, sau chiar poziții pare/impare.

Compatibilitate: Funcționează pe orice element care are o poziție clară în cadrul părintelui său.

Exemplu: Al doilea paragraf din containerul de mai jos va fi evidențiat.

🔧 Exemplu: :nth-child(2)

<div>
  <p>Primul paragraf<p>
  <p>Al doilea paragraf<p>
  <p>Al treilea paragraf<p>
</div>

div p:nth-child(2) {
  background-color: yellow;
  padding: 5px;
}

:nth-of-type()

Descriere: Selectează elementele aflate pe o anumită poziție în cadrul părintelui, dar doar dintre cele de același tip.

Utilizare: Este util când ai mai multe tipuri de elemente în același container și vrei să stilizezi doar al n-lea element de un anumit tip.

Compatibilitate: Funcționează pe orice element care are frați de același tip în cadrul părintelui.

Exemplu: Al doilea paragraf (nu al doilea copil!) din containerul de mai jos va fi evidențiat.

🔧 Exemplu: :nth-of-type(2)

<div>
  <p>Primul paragraf<p>
  <span>Un span între paragrafe</span>
  <p>Al doilea paragraf<p>
</div>

div p:nth-of-type(2) {
  background-color: lightblue;
  border-left: 4px solid blue;
  padding-left: 8px;
}

:only-child

Descriere: Selectează un element care este singurul copil al părintelui său.

Utilizare: Este util pentru a aplica stiluri speciale atunci când un element nu are frați.

Compatibilitate: Funcționează pe orice element care este singurul copil în cadrul părintelui.

Exemplu: Paragraful de mai jos va fi evidențiat doar dacă este singurul copil al containerului.

🔧 Exemplu: :only-child

<div>
  <p>Singurul paragraf<p>
</div>

div p:only-child {
  border: 2px dashed orange;
  padding: 10px;
}

:not()

Descriere: Selectează toate elementele care nu corespund selectorului specificat.

Utilizare: Este extrem de util pentru a exclude anumite elemente dintr-un set fără a le modifica direct.

Compatibilitate: Funcționează pe orice element HTML, în combinație cu orice selector valid.

Exemplu: Toate paragrafele care nu au clasa .exclus vor fi evidențiate.

🔧 Exemplu: :not()

<div>
  <p>Paragraf normal<p>
  <p class="exclus">Paragraf exclus<p>
  <p>Alt paragraf normal<p>
</div>

div p:not(.exclus) {
  background-color: lightgreen;
}

:empty

Descriere: Selectează elementele care nu conțin niciun nod copil — nici text, nici alte elemente.

Utilizare: Este util pentru a evidenția sau ascunde elementele goale, cum ar fi paragrafele necompletate sau div-urile fără conținut.

Compatibilitate: Funcționează pe orice element HTML care este complet gol.

Exemplu: Paragraful gol din containerul de mai jos va fi evidențiat.

🔧 Exemplu: :empty

<div>
  <p><p>
  <p>Paragraf cu text<p>
</div>

div p:empty {
  background-color: pink;
  border: 1px solid red;
  height: 20px;
}

Pseudo-clasele de stare

Pseudo-clasele de stare permit selectarea elementelor în funcție de starea lor actuală — cum ar fi dacă sunt activate, dezactivate, valide sau țintite. Sunt esențiale pentru formulare și interacțiuni dinamice.

:disabled

Descriere: Selectează elementele care sunt dezactivate și nu pot fi utilizate de către utilizator.

Utilizare: Este util pentru a stiliza câmpurile sau butoanele inactive, oferind un indiciu vizual clar.

Compatibilitate: Funcționează pe elemente de formular precum <input>, <button>, <select> etc.

Exemplu: Butonul dezactivat de mai jos va fi evidențiat.

🔧 Exemplu: :disabled

<button disabled>Buton dezactivat</button>

button:disabled {
  background-color: gray;
  color: white;
  cursor: not-allowed;
}

:enabled

Descriere: Selectează elementele care sunt active și pot fi utilizate de către utilizator.

Utilizare: Este util pentru a evidenția câmpurile sau butoanele funcționale dintr-un formular.

Compatibilitate: Funcționează pe elemente de formular precum <input>, <button>, <select> etc.

Exemplu: Butonul activ de mai jos va fi evidențiat.

🔧 Exemplu: :enabled

<button>Buton activ</button>

button:enabled {
  background-color: limegreen;
  color: white;
  font-weight: bold;
}

:target

Descriere: Selectează elementul care corespunde fragmentului din URL (adică partea după #).

Utilizare: Este util pentru a evidenția sau modifica stilul unui element atunci când este accesat direct printr-un link intern.

Compatibilitate: Funcționează pe orice element HTML care are un id ce poate fi referit în URL.

Exemplu: Când dai click pe linkul de mai jos, secțiunea țintită va fi evidențiată.

Exemplu: :target

<a href="#sectiune">Mergi la secțiune</a>
<div id="sectiune">Aceasta este secțiunea țintită.</div>

#sectiune:target {
  background-color: gold;
  padding: 10px;
  border: 2px solid orange;
}

:valid

Descriere: Selectează elementele de formular care au un conținut valid conform regulilor HTML5.

Utilizare: Este util pentru a evidenția câmpurile completate corect, oferind feedback vizual pozitiv.

Compatibilitate: Funcționează pe elemente precum <input>, <textarea>, <select> etc., care au atribute de validare (ex: required, pattern, type).

Exemplu: Câmpul valid va fi evidențiat.

Exemplu live: :valid

<input type="email" required placeholder="Introdu un email valid">

input:valid {
  border: 2px solid green;
  background-color: #eaffea;
}

:invalid

Descriere: Selectează elementele de formular care nu respectă regulile de validare HTML5.

Utilizare: Este util pentru a evidenția câmpurile completate greșit, oferind feedback vizual negativ.

Compatibilitate: Funcționează pe elemente precum <input>, <textarea>, <select> etc., care au atribute de validare (ex: required, pattern, type).

Exemplu: Câmpul invalid va fi evidențiat.

Exemplu live: :invalid

<input type="email" required placeholder="Introdu un email invalid">

input:invalid {
  border: 2px solid red;
  background-color: #ffeaea;
}

:required

Descriere: Selectează elementele de formular care au atributul required.

Utilizare: Este util pentru a evidenția câmpurile care trebuie completate înainte de trimiterea formularului.

Compatibilitate: Funcționează pe elemente precum <input>, <textarea>, <select> etc.

Exemplu: Câmpul obligatoriu va fi evidențiat.

Exemplu live: :required

<input type="text" required placeholder="Acest câmp este obligatoriu">

input:required {
  border: 2px solid orange;
  background-color: #fff4e5;
}

:optional

Descriere: Selectează elementele de formular care nu au atributul required.

Utilizare: Este util pentru a evidenția câmpurile opționale, oferind utilizatorului un indiciu vizual că completarea lor nu este obligatorie.

Compatibilitate: Funcționează pe elemente precum <input>, <textarea>, <select> etc.

Exemplu: Câmpul opțional va fi evidențiat.

Exemplu live: :optional

<input type="text" placeholder="Acest câmp este opțional">

input:optional {
  border: 2px dashed gray;
  background-color: #f9f9f9;
}

Pseudo-clasele avansate

Pseudo-clasele avansate extind puterea CSS-ului modern, permițând selecții complexe, condiționale și optimizate. Acestea oferă un control mai precis asupra stilizării, fără a fi nevoie de JavaScript sau modificări suplimentare în HTML.

:has()

Descriere: Selectează elementele care conțin un anumit descendent sau care îndeplinesc o condiție internă.

Utilizare: Este util pentru a aplica stiluri pe un element părinte în funcție de ce conține. De exemplu, poți evidenția un <div> care conține un <img> sau un <input:checked>.

Compatibilitate: Funcționează doar în browsere moderne (Chrome, Edge, Safari). Nu este suportat în Firefox (la momentul redactării).

Exemplu: Evidențiază un <div> care conține un buton.

Exemplu live: :has()

<div>
  <button>Click</button>
</div>
<div>
  <p>Fără buton<p>
</div>

div:has(button) {
  border: 2px solid blue;
  background-color: #e0f0ff;
  padding: 10px;
}

:is()

Descriere: Simplifică scrierea selectorilor complicați, grupând mai multe variante într-un singur bloc. Este util pentru a aplica același stil la mai multe tipuri de elemente fără a repeta codul.

Utilizare: Reduce redundanța și crește lizibilitatea CSS-ului, mai ales când ai stiluri comune pentru mai multe elemente sau combinații.

Compatibilitate: Suportat în toate browserele moderne.

Exemplu: Evidențiază toate titlurile <h1>, <h2> și <h3> cu același stil.

Exemplu live: :is()

<h1>Titlu principal</h1>
<h2>Subtitlu</h2>
<h3>Secțiune</h3>
<p>Paragraf normal<p>

h1:is(h1, h2, h3),
h2:is(h1, h2, h3),
h3:is(h1, h2, h3) {
  color: darkblue;
  font-family: sans-serif;
  border-bottom: 1px solid #ccc;
}

:where()

Descriere: Selectează elementele care corespund oricăruia dintre selectorii specificați, dar fără să adauge specificitate. Este ideal pentru stiluri generice sau de bază care nu trebuie să concureze cu alte reguli CSS.

Utilizare: Este util pentru a aplica stiluri comune fără a afecta ierarhia de specificitate, spre deosebire de :is().