`Selectori de atribut ([attr], ^=, $=, *=)` în CSS

Selectori și reguli de bază CSS2+ (^= $= *=: CSS3+, flag-ul i: Chrome 49, Firefox 47, Safari 9)

Selectează elementele după prezența sau valoarea unui atribut HTML: tipul unui câmp, adresa unui link, atribute data-*.

Sintaxă CSS

[disabled] { opacity: 0.5; }
input[type="email"] { ... }
a[href^="https"] { ... }   /* începe cu */
a[href$=".pdf"] { ... }     /* se termină cu */
a[href*="dexblog"] { ... }  /* conține */
[data-oras="iasi" i] { ... } /* fără diferență de majuscule */

Ce face `Selectori de atribut ([attr], ^=, $=, *=)`

Selectorii de atribut se scriu între paranteze drepte și permit stilizarea fără clase suplimentare. Poți verifica doar existența atributului ([required]) sau valoarea lui exactă ([type="checkbox"]).

Operatorii pentru potriviri parțiale:
• ^= valoarea începe cu textul dat.
• $= valoarea se termină cu textul dat.
• *= valoarea conține textul oriunde.
• ~= valoarea este o listă de cuvinte separate prin spațiu și unul dintre ele este exact textul dat.
• |= valoarea este exact textul sau începe cu textul urmat de cratimă (util pentru [lang|="ro"], care prinde ro și ro-MD).

Flag-ul i pus înainte de paranteza de închidere face comparația fără diferență între litere mari și mici: [href$=".pdf" i] prinde și .PDF. Flag-ul opus, s, are suport limitat (Firefox și Safari 27).

Valori uzuale

Valoare	Descriere
`[attr]`	Elementul are atributul, cu orice valoare.
`[attr="v"]`	Valoarea este exact v.
`[attr^="v"]`	Valoarea începe cu v.
`[attr$="v"]`	Valoarea se termină cu v.
`[attr*="v"]`	Valoarea conține v.
`[attr~="v"] / [attr\|="v"]`	Cuvânt exact dintr-o listă / v sau v- la început.

Exemple

Exemplul 1: Iconițe automate pentru documente și linkuri externe

Linkurile primesc o etichetă în funcție de adresă, fără să adaugi clase în HTML.

a[href$=".pdf" i]::after {
  content: " (PDF)";
  color: #dc2626;
  font-size: 0.8em;
}

a[href^="http"]:not([href*="dexblog.ro"])::after {
  content: " ↗";
}

Efect vizual în browser

Linkul „Orarul școlii 2026” spre orar.PDF apare urmat de textul roșu, mic, „(PDF)”. Linkul spre un site extern apare cu o săgeată „↗” după text, iar linkurile interne de pe dexblog.ro rămân fără săgeată.

Exemplul 2: Stiluri după atribute data-* și tipul câmpului

Atributele data-* sunt o metodă comodă de a transmite o stare din JavaScript spre CSS.

input[type="email"],
input[type="tel"] {
  font-family: ui-monospace, monospace;
}

.comanda[data-status="livrata"] {
  border-left: 4px solid #16a34a;
}

.comanda[data-status="anulata"] {
  border-left: 4px solid #dc2626;
  opacity: 0.6;
}