CSS kombinatorer

CSS kombinatorer

Kombinatorer er en mekanisme, der forklarer relationen mellem vælgere.

CSS vælgere kan indeholde flere enkle vælgere. Mellem de enkle vælgere kan vi inkludere en kombinator.

Der er fire forskellige kombinatorer i CSS:

  • Den efterkommervælger (mellemrum)
  • Den undervælger (>)
  • Den næste brorvælger (+)
  • Den universelle brorvælger (~)

Den efterkommervælger

Den efterkommervælger matcher alle elementer, der er efterkommere af det specificerede element.

Nedenstående eksempel vælger alle <p> elementer inden for <div> elementet:

Eksempel

div p {
  background-color: yellow;
}

Prøv det selv

Den undervælger

Den undervælger matcher alle elementer, der er under det specificerede element.

Nedenstående eksempel vælger alle <p> elementer, der er under <div> elementet:

Eksempel

div > p {
  background-color: yellow;
}

Prøv det selv

Den næste brorvælger

Den næste brorvælger matcher alle elementer, der er næste på samme niveau som det specificerede element.

Brødre (på samme niveau) skal have samme forældreelement, og 'næste' betyder 'umiddelbart efter'。

Nedenstående eksempel vælger alle <p> elementer, der følger efter <div> elementet:

Eksempel

div + p {
  background-color: yellow;
}

Prøv det selv

Den universelle brorvælger

Den universelle brorvælger matcher alle elementer, der er på samme niveau som det specificerede element.

Nedenstående eksempel vælger alle <p> elementer, der er på samme niveau som <div> elementet:

Eksempel

div ~ p {
  background-color: yellow;
}

Prøv det selv

Alle CSS kombinationsvælger

Vælger Eksempel Eksempelbeskrivelse
element element div p Vælg alle <p> elementer inden for <div> elementet.
element>element div > p Vælg alle <p> elementer, hvis forældre element er et <div> element.
element+element div + p Vælg alle <p> elementer, der følger efter en <div> element.
element1~element2 p ~ ul Vælg hver <ul> element, der har en <p> element som forløber.

Udvidet læsning

Ekstrabog:CSS efterkommer selector

Ekstrabog:CSS underelement selector

Ekstrabog:CSS næstkommerende bror selector