CSS -kombineerders
CSS-kombineerders
'n Kombineerder is iets wat die verhouding tussen die keurders verduidelik.
'n CSS-kieser kan meer as een eenvoudige kieser bevat. Tussen die eenvoudige keurders kan ons 'n kombineerder insluit.
Daar is vier verskillende kombineerders in CSS:
- afstammeling keurder (spasie)
- kinderkieser (>)
- aangrensende broer of suster (+)
- algemene broer en suster keurder (~)
Afstammeling keurder
Die afstammeling-kieser pas by alle elemente wat afstammelinge van 'n gespesifiseerde element is.
Die volgende voorbeeld kies alle <p>-elemente binne <div>-elemente:
Voorbeeld
div p {
background-color: yellow;
}
Kinderkieser (>)
Die kinderkieser kies alle elemente wat die kinders van 'n gespesifiseerde element is.
Die volgende voorbeeld kies alle <p>-elemente wat kinders van 'n <div>-element is:
Voorbeeld
div > p {
background-color: yellow;
}
Aangrensende broer of suster (+)
Die aangrensende broer of suster word gebruik om 'n element te kies wat direk na 'n ander spesifieke element is.
Broer-elemente moet dieselfde ouerelement hê, en "aangrensend" beteken "onmiddellik daarop".
Die volgende voorbeeld kies die eerste <p>-element wat onmiddellik na <div>-elemente geplaas word:
Voorbeeld
div + p {
background-color: yellow;
}
Algemene broer of suster (~)
Die algemene broer of suster selekteer alle elemente wat volgende broers en susters van 'n gespesifiseerde element is.
Die volgende voorbeeld kies alle <p>-elemente wat volgende broers en susters van <div>-elemente is:
Voorbeeld
div ~ p {
background-color: yellow;
}
Alle CSS Combinator Selectors
| Selector | Example | Example description |
|---|---|---|
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is a <div> element |
| element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |