`Selectorul :has() (Selectorul Părinte în CSS)` în CSS

Selectori și reguli de bază CSS Selectors Level 4

Descoperă pseudo-clasa relațională :has(): cum stilizezi un element părinte în funcție de copiii săi, formulare invalide, imagini și stări fără JavaScript.

Sintaxă CSS

article:has(img) { ... } form:has(:invalid) button { ... }

Pseudo-clasa relațională :has() reprezintă una dintre cele mai importante evoluții din istoria CSS. Cunoscută informal drept „selectorul părinte”, ea permite aplicarea de stiluri pe un element în funcție de elementele pe care le conține sau de starea elementelor descendente, eliminând complet nevoia de a adăuga clase prin JavaScript la fiecare schimbare de stare.

Scenarii revoluționare rezolvate cu :has()

/* 1. Stilizarea unui articol DOAR dacă acesta conține o imagine */
article:has(img) {
    grid-template-columns: 1fr 2fr;
    border-left: 4px solid #3858e9;
}

/* 2. Dezactivarea vizuală a butonului de Submit dacă formularul conține măcar un câmp invalid */
form:has(:invalid) button[type="submit"] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* 3. Blocarea derulării paginii când un dialog modal este deschis */
body:has(dialog[open]) {
    overflow: hidden;
}

/* 4. Selector de frate anterior (Previous Sibling Hack) */
/* Stilizează eticheta label atunci când input-ul asociat este bifat */
label:has(+ input:checked) {
    color: #16a34a;
    font-weight: bold;
}

Performanță și Compatibilitate

Selectorul :has() face parte din specificația CSS Selectors Level 4 și beneficiază de suport universal (Baseline) în toate browserele moderne (Chrome 105+, Safari 15.4+, Firefox 121+, Edge 105+). Motoarele de randare au optimizat arborele DOM astfel încât utilizarea :has() pe componente sau secțiuni specifice să nu afecteze performanța la scroll sau interacțiune.