Selectori CSS: Tipuri, Pseudo-clase, Pseudo-elemente și Combinatori explicati

Selectori CSS

Selectorii CSS sunt instrumente esențiale pentru stilizarea elementelor HTML. Ei permit selectarea precisă a elementelor din DOM, pe baza tipului, clasei, ID-ului, atributelor, stării sau poziției.

Principalele categorii de selectori

Selectori simpli - selectează elemente pe baza numelui, clasei sau ID-ului
Selectori de atribute - selectează elemente pe baza atributelor și valorilor acestora
Pseudo-clase - selectează elemente aflate într-o anumită stare (hover, focus, etc.)
Pseudo-elemente - selectează o parte din conținutul unui element (::before, ::after, etc.)
Combinatori - definesc relații între elemente (copil, frate, etc.)
Selectori multipli - aplică stiluri la mai multe elemente simultan

1. Selectori simpli

Exemplu clasic: selectarea tuturor elementelor p și div.

🔧 Exemplu selectori simpli

<p>Ce fel de ciocolată preferi?<p>
  <div>Ciocolată neagră.</div>
  <p>Eu prefer ciocolata cu lapte!<p>
  <div>Este bună și cea cu lapte dar...</div>

  p {
    color: red;
  }

  div {
    color: blue;
  }

Selectori moderni: `:is()` și `:where()`

Permite gruparea selectorilor. :is() păstrează specificitatea, :where() are specificitate zero.

🔧 Exemplu :is() și :where()

<h1>Titlu principal</h1>
  <h2>Subtitlu</h2>
  <h3>Sub-subtitlu</h3>

  :is(h1, h2, h3) {
    font-weight: bold;
    color: teal;
  }

  :where(section, article) {
    padding: 1rem;
    background-color: #f0f0f0;
  }

2. Selectori de atribute - Attribute Selectors

Selectorii de atribute permit selectarea elementelor pe baza atributelor HTML și valorilor acestora. Sunt extrem de utili în aplicații moderne, mai ales când folosim atribute personalizate data-*.

2.a Potrivire exactă

[atr] - selectează toate elementele care au atributul „atr”
[atr=val] - selectează elementele unde valoarea atributului este exact „val”
[atr~=val] - selectează elementele unde valoarea atributului conține cuvântul „val” într-o listă separată prin spații

🔧 Exemplu selectori de atribute - 1

<ul>
  <li data-quantity="1kg" data-vegetable>Roșii</li>
  <li data-quantity="3" data-vegetable>Ceapă</li>
  <li data-quantity="700g" data-vegetable="nu iute ca chili">Ardei roșu</li>
  <li data-quantity="2kg" data-meat>Pui</li>
  <li data-quantity="optional 150g" data-meat>Bacon</li>
  <li data-quantity="optional 10ml" data-vegetable="lichid">Ulei</li>
  <li data-quantity="25cl" data-vegetable="lichid">Vin alb</li>
</ul>

[data-vegetable] {
  color: green;
}

[data-vegetable="lichid"] {
  background-color: orange;
}

[data-vegetable~="iute"] {
  color: red;
}

2.b Potrivire parțială (substring)

[atr^=val] - valoarea începe cu „val”
[atr$=val] - valoarea se termină cu „val”
[atr*=val] - valoarea conține „val”
[atr|=val] - valoarea este „val” sau începe cu „val-” (ideal pentru lang="ro-RO")

🔧 Exemplu selectori de atribute - 2

<ul>
  <li lang="ro">Salut</li>
  <li lang="ro-RO">Bună ziua</li>
  <li data-quantity="optional 150g">Bacon</li>
  <li data-quantity="1kg">Roșii</li>
  <li data-vegetable="nu iute ca chili">Ardei</li>
</ul>

[lang|="ro"] {
  font-weight: bold;
}

[data-quantity^="optional"] {
  color: red;
}

[data-quantity$="kg"] {
  font-weight: bold;
}

[data-vegetable*="nu iute"] {
  color: green;
}

☞ Atributele data-* sunt utile pentru a stoca informații personalizate în HTML. Pot fi accesate ușor cu JavaScript și sunt frecvent folosite în aplicații moderne.

3. Pseudo-clase - Pseudo-classes

Pseudo-clasele sunt adăugate la sfârșitul selectorilor cu două puncte (:) și permit stilizarea elementelor aflate într-o anumită stare (ex: hover, focus, visited).

🔧 Exemplu pseudo-clase link

<a href="https://google.com" target="_blank">Google</a>

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

a:visited {
  color: red;
}

a:hover {
  font-weight: bold;
  text-decoration: underline;
}

a:focus,
a:active {
  color: fuchsia;
  text-decoration: none;
}

Ordinea aplicării pseudo-claselor pentru linkuri este importantă: LVHA - :link → :visited → :hover → :active. Schimbarea ordinii poate duce la comportamente imprevizibile.

☞ Doar :link și :visited sunt dedicate linkurilor. :hover, :focus și :active sunt pseudo-clase dinamice și pot fi folosite pe orice element HTML.

🔧 Exemplu pseudo-clase dinamice

<div class="rectangle">Rectangle</div>

.rectangle {
  width: 200px;
  height: 100px;
  margin: 2em auto;
  text-align: center;
  line-height: 100px;
  background-color: limegreen;
}

.rectangle:hover {
  background-color: yellow;
}

.rectangle:focus,
.rectangle:active {
  background-color: coral;
  transform: rotate(15deg);
  outline: 5px dotted green;
}

.rectangle:focus-visible {
  box-shadow: 0 0 0 3px orange;
}

4. Pseudo-elemente - Pseudo-elements

Pseudo-elementele seamănă cu pseudo-clasele, dar sunt precedate de două puncte duble (::) și permit stilizarea unei părți specifice dintr-un element, cum ar fi primul cuvânt, linia sau adăugarea de conținut înainte/după.

🔧 Lista pseudo-elemente

<div class="container">
  <div class="row">
    <div class="column"><p>::before<p><p>::after<p></div>
    <div class="column"><p>::first-letter<p><p>::first-line<p></div>
    <div class="column"><p>::selection<p><p>::marker<p><p>::placeholder<p></div>
  </div>
</div>

* {
  box-sizing: border-box;
  text-align: center;
  background-color: #ddd;
}
.container {
  width: 90%;
  margin: 0 auto;
  color: darkblue;
}
.column {
  font-size: 1.5rem;
  font-weight: bold;
  float: left;
  width: 33.33%;
  padding: 10px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

Exemplu clasic cu ::before și ::after:

🔧 Exemplificare pseudo-elemente

<ul>
  <li><a href="https://google.com">Google</a> este un motor de căutare.</li>
  <li><a href="https://bing.com">Bing</a> este alt motor de căutare.</li>
</ul>

[href^=http]::before {
  content: "🔗 ";
}
[href^=http]::after {
  content: " ⤴";
}

Exemplu cu `::marker` și `::placeholder`

🔧 Marker și Placeholder

<ul>
  <li>Primul element</li>
  <li>Al doilea element</li>
</ul>
<input type="text" placeholder="Introdu textul aici">

li::marker {
  color: crimson;
  font-size: 1.5em;
}
input::placeholder {
  color: gray;
  font-style: italic;
}

5. Combinatori și selectori multipli

Combinatorii definesc relații între elemente HTML. Folosind literele A și B, putem înțelege cum se leagă elementele între ele:

Nume	Sintaxă	Selectează
Selectori multipli	A, B	Toate elementele A și/sau B
Descendent	A B	Elemente B aflate în interiorul lui A
Copil direct	A > B	Elemente B direct sub A
Frate adiacent	A + B	Elementul B imediat după A
Frate general	A ~ B	Toate elementele B care urmează după A

🔧 Exemple combinatori

<table lang="ro-RO" class="moneda">
  <thead>
    <tr><th>Produs</th><th>Cantitate</th><th>Preț</th></tr>
  </thead>
  <tfoot>
    <tr><th colspan="2">Total:</th><td>1500</td></tr>
  </tfoot>
  <tbody>
    <tr><td>Masa</td><td>1</td><td>200</td></tr>
    <tr><td>Frigider</td><td>1</td><td>800</td></tr>
    <tr><td>Aragaz</td><td>1</td><td>500</td></tr>
  </tbody>
</table>
<p>Actualizat la 05.09.2019<p>

table td, table th {
  border: 1px solid black;
  padding: 0.5em;
}
table thead th {
  background: black;
  color: white;
}
table tbody td + td {
  background-color: antiquewhite;
}
table tbody td:last-child {
  background-color: aqua;
  text-align: right;
}
table tfoot th {
  background-color: aquamarine;
  text-align: right;
}
table th + td {
  background: red;
  color: white;
}
.moneda[lang="ro-RO"] td:last-child::before {
  content: "RON ";
}
.moneda[lang="ro"] td:last-child::after {
  content: " RON";
}
table ~ p {
  background-color: white;
}

☞ Există câteva elemente precum a, button, input și textarea care au o stare de focus implicită. Putem extinde această stare la orice element HTML5 folosind tabindex sau contenteditable (cu precauție). Stilul implicit de focus (linie punctată) provine din foaia de stil a browserului și poate fi personalizat cu CSS, dar trebuie păstrat sau înlocuit cu grijă pentru a menține accesibilitatea.

🧠 Recomandări de bune practici

Folosește pseudo-elementele pentru decor, nu pentru conținut esențial.
Respectă ordinea LVHA pentru linkuri: :link → :visited → :hover → :active.
Nu elimina complet outline la focus — înlocuiește-l cu ceva vizibil.
Testează combinatorii în contexte reale pentru a înțelege relațiile DOM.
Folosește :is() și :where() pentru grupări eficiente de selectori.
Explorează :has() pentru selecții condiționate (suportat în majoritatea browserelor moderne).

🧠 Quiz - Selectori CSS

Valori și unități CSS ➔