3. semester / Tema 13C: Frontend Design

Selectors: relationer og specificity

Skeln mellem hvilke elementer en selector vælger, og hvor svært dens deklarationer er at overskrive.

Se undervisningsslides

Relevante links

Oversæt selectoren

Beskriv først i almindeligt sprog, hvilke elementer der bliver valgt. Find derefter eksempler i HTML, som matcher og ikke matcher.

Selector	Hvilket element vælges?
`article p`	Et `p` et vilkårligt sted inde i et `article`
`article > p`	Et `p`, der er direkte barn af `article`
`h2 + p`	Et `p` umiddelbart efter et `h2`, med samme parent
`h2 ~ p`	Et `p` efter et `h2`, med samme parent, også med andre elementer imellem

En præcis relation gør ikke automatisk selectoren stærkere i kaskaden. Combinators som >, + og ~ tilføjer ikke specificity.

nth-child

:nth-child() tæller elementets placering blandt dets element-søskende. even vælger lige placeringer, odd ulige, og 3n hver tredje. Tekstnoder tæller ikke med.

Forudsig først, hvad der rammes. Tilføj så en anden type element mellem kortene, og se, om dit gæt stadig holder.

Filtrér før du tæller

Disse selectors betyder noget forskelligt:

.featured:nth-child(2) {
  outline: 4px solid blue;
}

:nth-child(2 of .featured) {
  outline: 4px solid red;
}

Den første kræver, at elementet både har klassen featured og er andet element-barn. Den anden finder først de søskende, der matcher .featured, og vælger derefter nummer to blandt dem.

Flyt et almindeligt kort foran et featured-kort. Hvilken selector beholder den betydning, du ville udtrykke?

is(), where() og not()

:is() samler alternativer, :not() udelukker matches, og :where() kan samle alternativer uden at bidrage med specificity.

article > :is(h2, h3) {
  margin-block-end: 1rem;
}

p:not(.lede) {
  max-width: 65ch;
}

Den første regel vælger direkte børn, der er h2 eller h3. Den anden vælger afsnit uden klassen lede. :is() og :not() får specificity fra den stærkeste selector i deres argumentliste. Hele :where(...) har derimod specificity nul.

Præcis udvælgelse med lav specificity

Prøv denne HTML og CSS i et tomt dokument. Gæt farven inden hver ændring:

<nav>
  <a class="link" href="#indhold">Læs mere</a>
</nav>

.link {
  color: blue;
}

nav a {
  color: red;
}

Linket bliver blåt: .link har højere specificity end nav a, selv om den røde regel står sidst. Erstat kun den sidste selector med :is(nav a) og derefter :where(nav a). Med .link som den første selector forbliver linket blåt i begge tilfælde.

Erstat nu .link med a, og sammenlign igen:

Sidste selector	Linkets farve med `a { color: blue; }` først
`nav a`	Rød
`:is(nav a)`	Rød
`:where(nav a)`	Blå

Brug DevTools til at finde beviset. Alle tre selectors kan vælge samme link i denne HTML, men deres specificity er forskellig. :where() er derfor nyttig til præcise standardregler, som komponenter let skal kunne overskrive.

Læs MDN om specificity. Fortsæt med relationelle selectors og :has(), hvor indhold og søskende kan afgøre, hvilket element der styles.