:has() relationspseudoklass

Pseudoklassen :has() väljer ett element om det innehåller en ättling som matchar argumentet. Den kallas ofta för ”föräldraselektorn” och gör det möjligt att formge ett överordnat element utifrån dess underordnade element — en funktion som CSS tidigare saknade.

.card:has(img) väljer alla .card-element som innehåller en img-ättling. Argumentet är en lista med relativa selektorer — alla giltiga CSS-selektorer som beskriver element i förhållande till det aktuella elementet.

Formge en formulärbehållare när den innehåller ett ogiltigt inmatningsfält: form:has(:invalid) { border-color: red; }. Formge en sektion som innehåller en rubrik: section:has(h2) { padding-top: 2rem; }. Det överordnade elementets utseende ändras utifrån de underordnade elementens tillstånd.

:has() kan välja föregående syskonelement — något som + och ~ inte kan göra. h2:has(+ p) väljer h2-element som följs direkt av p. li:has(~ .active) väljer li-element som har ett efterföljande syskonelement med klassen .active.

Reagera på inbyggd formulärvalidering utan JavaScript: input:has(~ .error-msg) formger ett inmatningsfält som har ett syskonelement med ett felmeddelande. label:has(+ input:required) formger etiketter vars kopplade inmatningsfält är obligatoriska — allt med enbart CSS.

Markera navigeringsbehållare utifrån ett aktivt underordnat element: nav:has(.active) tillämpar stilar på hela nav-elementet när något underordnat element har klassen active. Det är användbart för att på behållarnivå visa vilken navigeringssektion som är aktuell.

.grid:has(.card:focus-within) formger hela rutnätet när något kort får tangentbordsfokus. .dropdown:has(:hover) håller en listruta öppen så länge pekaren är över någon ättling — renare än komplexa kedjor av syskonkombinatorer.

.sidebar:has(nav) tillämpar en annan layout än .sidebar:not(:has(nav)). Villkorsstyrd layout utan JavaScript: förekomsten eller frånvaron av specifika underordnade element styr det överordnade elementets layout — vilket möjliggör verkligt adaptiv och innehållsmedveten CSS.

:has() med breda argumentselektorer (till exempel :has(*)) kan vara kostsamt — webbläsaren måste kontrollera varje element. Håll argumenten till :has() specifika. Föredra :has(> .specific-child) (direkt underordnat element) framför :has(.specific-child) (valfri ättling) när det är möjligt.

:has() stöds i Chrome 105+, Safari 15.4+ och Firefox 121+. Fullt baslinjestöd har funnits sedan slutet av 2023. Det finns ingen polyfill (det skulle kräva JavaScript för att simulera funktionen) — använd det med progressiv förbättring i äldre webbläsare där funktionen inte är kritisk.

Mönster som tidigare krävde JS-händelselyssnare: ”lägg till en klass på det överordnade elementet när ett underordnat element får fokus”, ”visa ett överlägg när en modalutlösare finns” och ”formge ett rutnät annorlunda när det har exakt tre objekt”. :has() hanterar alla dessa deklarativt.

:has() är CSS första verkliga relationella pseudoklass och möjliggör val av överordnade element och föregående syskonelement. Den möjliggör innehållsdriven formgivning, reaktioner på formulärtillstånd, markering av navigering och många mönster som tidigare krävde JavaScript-baserad DOM-manipulering — allt deklarativt i CSS.