Selectori CSS3: Ghid Complet și Exemple Practice

Cum selectezi elemente HTML după valoarea atributelor

Selectorii de atribut în CSS3 permit identificarea elementelor din pagină pe baza prezenței sau valorii specifice a unui atribut HTML (precum href, src, title, target sau atribute personalizate data-*). Aceștia oferă trei operatori noi de potrivire a textului: potrivire la început (^=), potrivire la sfârșit ($=) și potrivire parțială (*=).

Prin utilizarea acestor selectori, poți stiliza automat linkurile externe, fișierele descarcabile PDF sau imaginile PNG fără să schimbi codul sursă HTML generat de CMS-uri precum WordPress sau Drupal.

/* Selecteaza linkurile securizate HTTPS */
a[href^="https://"] {
  padding-left: 18px;
  background: url('lock.svg') left center no-repeat;
}

/* Selecteaza fișierele PDF descarcabile */
a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 0.8em;
  color: #d6472e;
}

/* Selecteaza orice clasa ce contine 'alerta-' */
[class*="alerta-"] {
  border-left: 4px solid #e8b339;
}

Stilizarea elementelor după poziția din DOM (:nth-child și :not)

Pseudo-clasele structurale permit selectarea elementelor pe baza poziției exacte pe care o ocupă în arborele DOM în raport cu frații lor. În loc să adaugi clase manual pe rândurile par sau impar ale unui tabel, :nth-child() calculează dinamica selecției folosind formule matematice precum 2n, 2n+1, odd sau even.

De asemenea, pseudo-clasa :not() (cunoscută ca selectorul de negare) permite izolarea și excluderea anumitor elemente din regulile de stilizări generale, simplificând arhitectura CSS.

/* Stilizeaza randurile impare din lista */
li:nth-child(odd) {
  background: #efe7d6;
}

/* Aplica margine pe toate elementele, mai putin pe ultimul */
.card:not(:last-child) {
  margin-bottom: 20px;
}

Interfață interactivă fără JavaScript (:checked și :target)

CSS3 permite crearea de componente de interfață dinamice (cum ar fi meniuri burger mobile, acordeoane, comutatoare toggle sau ferestre modale) doar din HTML și CSS, folosind pseudo-clase de stare precum :checked și :target.

Starea :checked se aplică căsuțelor de bifat (checkbox) și casetelor radio când sunt selectate de utilizator, iar :target stilizează un element a cărui ancoră ID corespunde cu hash-ul din URL-ul paginii.

/* Schimba aspectul etichetei cand inputul e bifat */
input:checked + label {
  background: #d6472e;
  color: #fff5ef;
  border-color: #d6472e;
}

/* Evidintiaza sectiunea tinta din URL */
section:target {
  background-color: #fff8e7;
  border-left: 4px solid #e8b339;
}

Gestionarea primului, ultimului și unicului copil

Aceste pseudo-clase simplifică curățarea separatorilor și liniilor de bordură din liste. :first-child vizează primul element dintr-un container părinte, :last-child pe ultimul, iar :only-child se declanșează doar dacă elementul este singurul descendent direct.

/* Primul element primeste o culoare distincta */
li:first-child {
  font-weight: 700;
  color: #d6472e;
}

/* Elimina linia de jos de pe ultimul element */
li:last-child {
  border-bottom: none;
}

/* Stilizeaza paragrafele unice */
p:only-child {
  font-size: 1.1rem;
}

Conținut decorativ generat direct din CSS

Pseudo-elementele ::before și ::after creează elemente cosmetice virtuale direct din foaia de stiluri CSS fără să aglomereze codul HTML. Sunt ideale pentru adăugarea de pictograme, linii decorative, insigna „NOU” pe carduri sau efecte speciale la trecerea mouse-ului.

.link-extern::after {
  content: ' ↗';
  font-size: .8em;
  color: #6ea8d8;
}

.citat::before {
  content: '« ';
  font-size: 1.8em;
  color: #e8b339;
}

Stilizarea containerului părinte la focusul copiilor

Pseudo-clasa :focus-within reprezintă o inovație majoră în CSS3/CSS4. Aceasta activează reguli de stilizare pe un container părinte atunci când oricare dintre elementele sale descendente (câmpuri de text, butoane, linkuri) primește focusul tastaturii sau al mouse-ului.

/* Formularul intreg isi schimba bordura cand utilizatorul scrie */
.grup-formular:focus-within {
  border-color: #6ea8d8;
  box-shadow: 0 0 0 3px rgba(110,168,216,.25);
}

.grup-formular:focus-within label {
  color: #6ea8d8;
}

Gruparea eficientă a selectorilor și controlul specificității

Pseudo-clasele funcționale :is() și :where() rezolvă problema duplicării lungi de cod atunci când doriți să stilizați aceleași titluri sau paragrafe în mai multe secțiuni ale paginii. Diferența critică constă în modul de calcul al specificității CSS:

:is() preia specificitatea celui mai puternic selector trecut ca argument, în timp ce :where() are specificitate nulă (0, 0, 0), făcând regulile stilizate cu :where() extrem de ușor de suprascris ulterior.

/* In loc de: header h1, nav h1, footer h1 */
:is(header, nav, footer) h1 {
  color: #d6472e;
}

/* Stiluri de baza cu specificitate zero (usor de suprascris) */
:where(article, section) p {
  line-height: 1.7;
  color: #4a5568;
}

Selectorul părinte revoluționar în CSS modern

Denumit des „sfântul graal al selectorilor CSS”, :has() permite stilizarea unui element părinte în funcție de prezența sau starea copiilor săi. Pentru prima dată în istoria CSS, poți aplica reguli pe o cutie părinte dacă aceasta conține o imagine, un anumit buton sau un câmp de input invalid, fără a mai apela la cod JavaScript.

/* Stilizeaza cardul doar daca contine o imagine */
.card:has(img) {
  display: grid;
  grid-template-columns: 120px 1fr;
}

/* Schimba bordura formularului daca exista erori */
form:has(input:invalid) {
  border-left: 4px solid #d6472e;
}

Detectarea și ascunderea elementelor fără conținut

Pseudo-clasa :empty selectează orice element HTML care nu conține niciun copil (nici noduri de text, nici alte etichete HTML și nici spații albe). Este utilizată frecvent pentru ascunderea automată a mesajelor de eroare goale sau pentru introducerea de conținut de rezervă (fallback).

/* Ascunde casetele de alerta cand sunt goale */
.alerta:empty {
  display: none;
}

/* Afiseaza un placeholder pentru casetele goale */
.container:empty::before {
  content: 'Momentan nu exista date...';
  color: #a0aec0;
}

Filtrul precis după tipul etichetei HTML

Spre deosebire de :nth-child() care numără indiferent de tipul de tag, :nth-of-type() ignoră alte etichete HTML vecine și filtrează doar elementele de același tip. Acest lucru garantează stilizarea exactă a paragrafelor sau imaginilor dintr-un articol mixt.

/* Stilizeaza doar al doilea paragraf din articol */
p:nth-of-type(2) {
  background: #efe7d6;
  padding: 8px;
}

/* Primul titlu H2 de un anumit tip */
h2:first-of-type {
  margin-top: 0;
}

Validarea prietenoasă a formularelor web

În loc să deranjeze utilizatorul cu mesaje roșii de eroare înainte ca acesta să apuce să tasteze (cum face vechiul selector :invalid), pseudo-clasa :user-invalid se activează numai DUPĂ ce utilizatorul a completat câmpul și a mutat cursorul în altă parte (blur / ieșire din câmp), adică la finalizarea interacțiunii.

/* Arata erori doar dupa ce utilizatorul a terminat de tastat */
input:user-invalid {
  border-color: #d6472e;
  background-color: #fff5f5;
}

input:user-valid {
  border-color: #38a169;
}

Stilizarea câmpurilor goale în formulare

Selectorul :placeholder-shown permite personalizarea unui câmp atunci când valoarea sa este goală, de ex. pentru a evidenția câmpul în curs de completare.

input:placeholder-shown {
  border-color: #6ea8d8;
  background: #f4f8ff;
}

Reducerea vizuală a elementelor inactive

:disabled adaugă un stil clar pentru butoane, câmpuri și controale dezactivate, lucru important pentru UX, accesibilitate și validare de formulare.

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

Distincția dintre controale active și inactive

Selectorul :enabled este util pentru a restabili starea de bază a unui element activ după ce a fost dezactivat, de exemplu pentru reacționarea dinamică a formularelor.

input:enabled {
  border-color: #38a169;
}

input:disabled {
  opacity: .6;
}

Selecția din coadă, spre deosebire de început

:nth-last-child() numără elementele în ordine inversă, ideal pentru stilizarea ultimului element din grup fără a rescrie markup-ul sau a folosi clase de ajutor.

.lista li:nth-last-child(2) {
  border-bottom: 2px solid #d6472e;
}

Excluderea anumitor elemente din stilizare

Selectorul :not() te ajută să aplici reguli generale și să excludi anumite cazuri, fără a adăuga clase suplimentare la markup. Este foarte popular în navigații și liste de carduri.

.lista-item:not(.featured) {
  opacity: .82;
}

Detectarea unui părinte după conținutul copilului

Selectorul :has() vă permite să stilizați un element părinte în funcție de ce conține. Este deosebit de util pentru validări, layout-uri inteligente și meniuri contextuale.

.card:has(img) {
  border: 2px solid #6ea8d8;
}

.article:has(p.error) { color: #d6472e; }

Elemente de formular cu stări interactive

Selectorii :checked și :indeterminate sunt esențiali pentru checkbox-uri, radio buttons și componente de selecție complet automatizate.

input:checked + span {
  color: #d6472e;
  font-weight: 700;
}

Evidențierea accesibilă la tastatură

:focus-visible este preferat față de :focus pentru a evidenția doar starea de focalizare reală, în special pentru navigarea cu tastatura. Este esențial pentru accesibilitate și pentru UX web modern.

button:focus-visible,
a:focus-visible {
  outline: 3px solid #e8b339;
  outline-offset: 3px;
}

Stilizarea secțiunii active din URL

Selectorul :target-within permite stilizarea unui container părinte când unul dintre copiii săi este elementul activ din URL. Este o metodă elegantă pentru meniuri, filtre și secțiuni de acordare.

.tabs:target-within {
  border-color: #d6472e;
  box-shadow: 0 0 0 2px rgba(214,71,46,.2);
}

Adaptarea textului în funcție de limbă

Selectorul :lang() te ajută să diferențiezi stilurile pentru limbi diferite, fără a schimba structura HTML. Este util în site-uri internaționale și bloguri multi-limbă.

:lang(en) {
  font-family: Arial, sans-serif;
}

:lang(ro) {
  font-family: 'Source Serif 4', serif;
}

Detectarea direcției de citire

Selectorul :dir() te ajută să stilizezi conținutul în funcție de direcția de citire a elementului, de la stânga la dreapta sau de la dreapta la stânga.

[dir="rtl"] .label {
  text-align: right;
  margin-inline-start: 0;
}

Validarea formularelor fără JavaScript

Selectorii :valid și :invalid permit feedback vizual instant pentru câmpurile de formular fără a necesita logică JavaScript.

input:invalid {
  border-color: #d6472e;
}

input:valid {
  border-color: #2f8f5b;
}

Validarea rapidă a numerelor și valorilor de interval

Selectorii :in-range și :out-of-range sunt perfecte pentru input-uri de tip number sau range, atunci când vrei să arăți vizual dacă o valoare respectă intervalul definit.

input[type="number"]:out-of-range {
  border-color: #d6472e;
  background: #fff3f1;
}

input[type="number"]:in-range {
  border-color: #2f8f5b;
}

Semnalizarea câmpurilor obligatorii

Trăsăturile :required și :optional te ajută să distingui formele obligatorii ale unei aplicații și să îți creezi feedback vizual clar pentru formulare.

input:required::placeholder {
  color: #d6472e;
}

input:optional {
  border-style: dashed;
}