:has()-relationele pseudoklasse

De pseudo-klasse :has() selecteert een element als het een afstammeling bevat die overeenkomt met het argument. Deze wordt vaak de "selector voor het bovenliggende element" genoemd en maakt het mogelijk een bovenliggend element op basis van zijn onderliggende elementen op te maken — een mogelijkheid die CSS eerder niet had.

.card:has(img) selecteert elk .card-element dat een img-afstammeling bevat. Het argument is een lijst met relatieve selectors: elke geldige CSS-selector die elementen beschrijft ten opzichte van het doelelement.

Maak een formuliercontainer op wanneer deze een ongeldige invoer bevat: form:has(:invalid) { border-color: red; }. Maak een sectie op die een kop bevat: section:has(h2) { padding-top: 2rem; }. Het bovenliggende element verandert van uiterlijk op basis van de toestand van het onderliggende element.

:has() kan voorgaande broer- en zusterelementen selecteren — iets wat + en ~ niet kunnen. h2:has(+ p) selecteert h2-elementen die direct worden gevolgd door p. li:has(~ .active) selecteert li-elementen met een later .active-broer- of -zusterelement.

Reageer zonder JavaScript op de ingebouwde geldigheid van formulieren: input:has(~ .error-msg) maakt een invoerveld op dat een foutmelding als broer- of zusterelement heeft. label:has(+ input:required) maakt labels op waarvan het gekoppelde invoerveld verplicht is — allemaal alleen met CSS.

Markeer navigatiecontainers op basis van een actief onderliggend element: nav:has(.active) past stijlen toe op de volledige navigatie wanneer een onderliggend element de klasse active heeft. Dit is handig om op containerniveau aan te geven welk navigatiegedeelte actief is.

.grid:has(.card:focus-within) maakt het volledige raster op wanneer een kaart toetsenbordfocus krijgt. .dropdown:has(:hover) houdt een vervolgkeuzemenu geopend zolang de muis zich boven een onderliggend element bevindt — overzichtelijker dan complexe ketens van broer- en zuscombinatoren.

.sidebar:has(nav) krijgt een andere lay-out dan .sidebar:not(:has(nav)). Voorwaardelijke lay-out zonder JavaScript: de aan- of afwezigheid van specifieke onderliggende elementen bepaalt de lay-out van het bovenliggende element, waardoor echt adaptieve CSS ontstaat die rekening houdt met de inhoud.

:has() met brede selectors als argument (bijvoorbeeld :has(*)) kan belastend zijn — de browser moet elk element controleren. Houd de argumenten van :has() specifiek. Geef waar mogelijk de voorkeur aan :has(> .specific-child) (direct onderliggend element) boven :has(.specific-child) (elke afstammeling).

:has() wordt ondersteund in Chrome 105+, Safari 15.4+ en Firefox 121+. Volledige standaardondersteuning bestaat sinds eind 2023. Er is geen polyfill beschikbaar (daarvoor zou JavaScript nodig zijn om dit na te bootsen). Gebruik de functie met geleidelijke verbetering in oudere browsers waar deze niet essentieel is.

Patronen waarvoor vroeger JavaScript-gebeurtenislisteners nodig waren: "een klasse aan het bovenliggende element toevoegen wanneer het onderliggende element focus krijgt", "een overlay tonen wanneer modal-trigger bestaat", "een raster anders opmaken wanneer het precies drie elementen bevat". :has() handelt al deze patronen declaratief af.

:has() is de eerste echte relationele pseudo-klasse van CSS en maakt het mogelijk bovenliggende en voorgaande broer- en zusterelementen te selecteren. De functie ondersteunt inhoudgestuurde stijlen, reacties op de toestand van formulieren, markering van navigatie en veel patronen waarvoor eerder JavaScript-manipulatie van de DOM nodig was — allemaal declaratief in CSS.