CSS-kombinatorer

CSS-kombinatorer

Kombinatorer är ett mekanism som förklarar förhållandet mellan väljare.

CSS-väljare kan innehålla flera enkla väljare. Mellan enkla väljare kan vi inkludera en kombinator.

Det finns fyra olika typer av kombinatorer i CSS:

  • Avkommandoväljare (tomt utrymme)
  • Underväljare (>)
  • Närstående brorsväljare (+)
  • Allmän brorsväljare (~)

Avkommandoväljare

Avkommandoväljare matchar alla element som är avkommando till det specifika elementet.

Nedanstående exempel väljer alla <p> element inom <div> elementet:

Exempel

div p {
  background-color: yellow;
}

Prova själv

Underväljare

Underväljare matchar alla element som är under det specifika elementet.

Nedanstående exempel väljer alla <p> element som är under <div> elementet:

Exempel

div > p {
  background-color: yellow;
}

Prova själv

Närstående brorsväljare

Närstående brorsväljare matchar alla element som är närmaste bröder till det specifika elementet.

Bröder (jämlikar) element måste ha samma förälder, 'närstående' innebär 'direkt efter'.

Nedanstående exempel väljer alla <p> element som följer direkt efter <div> elementet:

Exempel

div + p {
  background-color: yellow;
}

Prova själv

Allmän brorsväljare

Allmän brorsväljare matchar alla element som är jämlikar till det specifika elementet.

Nedanstående exempel väljer alla <p> element som är jämlikar till <div> elementet:

Exempel

div ~ p {
  background-color: yellow;
}

Prova själv

Alla CSS-kombinationsväljare

Väljare Exempel Exempelbeskrivning
element element div p Välj alla <p> element inom <div> elementet.
element>element div > p Välj alla <p> element som har en <div> element som förälder.
element+element div + p Välj alla <p> element som följer direkt efter en <div> element.
element1~element2 p ~ ul Välj varje <ul> element som har en <p> element som förälder.

Fortsätt läsa

Extra böcker:CSS efterkommande väljare

Extra böcker:CSS underordnad element väljare

Extra böcker:CSS närliggande syskon väljare