În CSS, multe reguli au fost construite în jurul ideii că selectăm un element și îi definim aspectul în funcție de clase, atribute sau poziția sa. Selectorul :has() adaugă o posibilitate importantă: poți selecta un element în funcție de ceea ce conține sau de relația pe care o are cu alte elemente din pagină.
Ce face selectorul :has()?
:has() este o pseudo-clasă relațională. Ea verifică dacă un element corespunde unui selector inclus între paranteze. De exemplu, poți stiliza un card numai atunci când conține o imagine sau poți evidenția un formular care are un câmp invalid.
.card:has(img) {
border-color: #4b8cff;
}
form:has(input:invalid) {
outline: 2px solid #d44;
}
Primul exemplu aplică un contur cardurilor care conțin o imagine. Al doilea evidențiază formularul atunci când cel puțin un câmp nu trece validarea HTML. Nu mai este nevoie să adaugi manual o clasă suplimentară prin JavaScript pentru aceste situații simple.
Unde este util în proiectele web?
- Carduri care își schimbă aspectul când au imagine, video sau un anumit tip de conținut.
- Formulare care evidențiază automat câmpurile invalide.
- Elemente de navigare care reacționează când conțin un submeniu.
- Layout-uri care se adaptează la prezența anumitor componente.
Exemple pentru interfețe responsive
Poți combina :has() cu media queries pentru a modifica aspectul unui container în funcție de conținut și de dimensiunea ecranului. Este important să păstrezi regulile clare și să nu transformi selectorii foarte complecși într-o alternativă greu de întreținut la o structură HTML bine organizată.
Înainte de folosire, verifică suportul browserelor vizate și testează componentele pe dispozitive reale. Pentru detalii tehnice, documentația MDN despre pseudo-clasa :has() oferă exemple și informații despre compatibilitate.
Un website coerent transmite aceeași identitate și în afara ecranului. Pentru vitrine, birouri sau spații comerciale poți integra stickere decorative potrivite identității vizuale a brandului.
:has() nu înlocuiește toate clasele sau scripturile, dar oferă o metodă elegantă de a scrie CSS mai expresiv și de a reduce codul auxiliar în multe interfețe moderne.
