Tilbage til Fundamentals

3. semester / Tema 13C: Frontend Design

:has() i praksis

Relationelle selectors og quantity queries med :has().

Se undervisningsslides

Relevante links

Hvad er :has()

:has() kaldes ofte en relationel pseudo-klasse: du kan style et element ud fra hvad det indeholder eller hvad der ligger ved siden af det.

Det gør det muligt at flytte logik op på parent-niveau i stedet for at style kun det inderste element.

Det åbner op for helt nye måder at tænke på i forhold til styling baseret på indhold og struktur.

Patterns og øvelser

Der er mange patterns du kan bygge med :has(). Her er nogle eksempler:

.card:has(img)

Vælger .card, hvis der findes et img indeni.

.card:not(:has(img))

Vælger .card, hvis den ikke har et billede.

.form:has(:focus-within)

Vælger .form, hvis et felt indeni har fokus.

.option:has(input:checked)

Vælger .option, hvis den indeholder et input der er :checked.

.list:has(:nth-child(4))

Vælger .list, hvis der er mindst 4 børn.

.item:has(+ .item)

Vælger .item, hvis der findes en søskende-.item lige efter.

.item:has(~ .item)

Vælger .item, hvis der findes en søskende-.item senere i DOM'en.

.card:has(img, video)

Vælger .card, hvis den har enten img eller video indeni.

.card:has(img):has(video)

Vælger .card, hvis den har både img og video indeni.

.gallery:not(:has(:not(img)))

Vælger .gallery, hvis den ikke har noget indhold der ikke er et img.

:has() er altså særligt nyttig, når du har brug for at style baseret på indholdets tilstedeværelse, tilstand eller mængde. Det kan være:

Test dig selv

  1. Knappen med et ikon skal have helt runde hjørner og have reduceret padding på højre side til 0.675rem.
  1. Giv kun det udsolgte produkt en outline ved hjælp af CSS :has().
  1. .container skal have et grid med to kolonner, hvis der er et <figure>-element. Hvis der ikke er et <figure>-element, skal .container have en max-width på 40ch og være centreret.
  1. Giv p en grøn farve, hvis den kommer før figure, og rød farve, hvis den kommer efter figure.