Una grossa limitazione nel CSS è l'imposibilità di applicare stili sulla base del contenuto o i sui discendenti. Con l'introduzione del selettore :has avviene un cambiamento radicale: gli sviluppatori possono applicare stili in base a condizioni che prima richiedevano workaround complessi o l'uso di JavaScript.

A differenza dei selettori tradizionali che funzionano solo "dall'alto verso il basso", :has() permette di invertire la logica.

elemento:has(selettore)

L'applicazione non richiede conoscenze aggiuntive a quelle che già abbiamo. Supponiamo di voler stilizzare tutti i tag div che contengono un p al loro interno.

div:has(p) {
    border: 1px solid red;
}

Allo stesso modo possiamo specificare una classe applicata all'elemento figlio.

ul:has(li.active) {
    color: green;
}

Inoltre con :has(), possiamo anche applicare stili in base allo stato, come un campo di input in focus.

form:has(input:focus) {
  background-color: lightblue;
}

• Abbia un primo discendente che sia un p
• Contenga un ul con almeno un primo figlio li

div:has(> p, ul li:first-child) {
    color: blue;
}