:has() relasjonell pseudoklasse
Velg overordnede elementer basert på underelementene deres ved hjelp av den kraftige relasjonelle pseudoklassen :has().
:has() relasjonell pseudoklasse er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva er :has()?
Pseudoklassen :has() velger et element hvis det inneholder en etterkommer som samsvarer med argumentet. Den kalles ofte «foreldreselektoren» og gjør det mulig å style et overordnet element basert på underordnede elementer — en mulighet CSS aldri har hatt før.
Grunnleggende syntaks
.card:has(img) velger alle .card-elementer som inneholder en img-etterkommer. Argumentet er en relativ selektorliste — enhver gyldig CSS-selektor som beskriver elementer relativt til målelementet.
Stilsetting av overordnede elementer
Stilsett en skjemabeholder når den inneholder et ugyldig input-element: form:has(:invalid) { border-color: red; }. Stilsett en seksjon som inneholder en overskrift: section:has(h2) { padding-top: 2rem; }. Det overordnede elementet endrer utseende basert på tilstanden til underordnede elementer.
Valg av søskenelementer
:has() kan velge foregående søskenelementer — noe + og ~ ikke kan gjøre. h2:has(+ p) velger h2-elementer som følges umiddelbart av p. li:has(~ .active) velger li-elementer som har et senere .active-søsken.
Stilsetting av skjematilstand
Reager på innebygd skjemavalidering uten JavaScript: input:has(~ .error-msg) stilsetter et input-element som har en søskenmelding med feil. label:has(+ input:required) stilsetter etiketter der det tilknyttede input-elementet er obligatorisk — alt med CSS alene.
Navigasjonstilstand
Uthev navigasjonsbeholdere basert på et aktivt underordnet element: nav:has(.active) bruker stiler på hele nav-elementet når et underordnet element har klassen active. Dette er nyttig for å vise hvilken navigasjonsseksjon som er aktuell, på beholdernivå.
Kombinering med andre pseudoklasser
.grid:has(.card:focus-within) stilsetter hele rutenettet når et kort får tastaturfokus. .dropdown:has(:hover) holder en rullegardinmeny åpen når pekeren føres over en hvilken som helst etterkommer — ryddigere enn komplekse kjeder med søskenkombinatorer.
Tilsvarende mediespørring i CSS
.sidebar:has(nav) bruker en annen layout enn .sidebar:not(:has(nav)). Betinget layout uten JavaScript: om bestemte underordnede elementer finnes eller ikke, styrer den overordnede layouten — og muliggjør virkelig adaptiv, innholdsbevisst CSS.
Ytelseshensyn
:has() med brede argumentselektorer (for eksempel :has(*)) kan være kostbart — nettleseren må kontrollere hvert element. Hold argumentene til :has() spesifikke. Foretrekk :has(> .specific-child) (direkte underordnet element) fremfor :has(.specific-child) (en hvilken som helst etterkommer) når det er mulig.
Nettleserstøtte
:has() støttes i Chrome 105+, Safari 15.4+ og Firefox 121+. Full baseline-støtte har vært tilgjengelig siden slutten av 2023. Det finnes ingen polyfill (det ville kreve JavaScript for å simulere funksjonen) — bruk den med progressiv forbedring i eldre nettlesere der funksjonen ikke er kritisk.
Erstatning av JavaScript-mønstre
Mønstre som tidligere krevde JS-hendelseslyttere: «legg til en klasse på det overordnede elementet når et underordnet element får fokus», «vis et overlegg når en modal-trigger finnes», «bruk en annen stil på et rutenett når det har nøyaktig tre elementer». :has() håndterer alle disse deklarativt.
Kunnskapssjekk
Hva gjør :has() unik sammenlignet med eksisterende CSS-kombinatorer som + og ~?
Sammendrag
:has() er CSS sin første virkelige relasjonelle pseudoklasse og muliggjør valg av overordnede elementer og foregående søsken. Den muliggjør innholdsbasert stilsetting, reaksjoner på skjematilstander, utheving av navigasjon og mange mønstre som tidligere krevde JavaScript-manipulering av DOM-en — alt dette deklarativt i CSS.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «:has() relasjonell pseudoklasse» gratis?
Ja – hele teksten i «:has() relasjonell pseudoklasse» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «:has() relasjonell pseudoklasse»?
Velg overordnede elementer basert på underelementene deres ved hjelp av den kraftige relasjonelle pseudoklassen :has(). Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «:has() relasjonell pseudoklasse»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Innebygd CSS-nøsting
- :has() relasjonell pseudoklasse
- @scope for avgrensede stiler
- View Transitions API