CSS- combinaties
CSS-combinaties
Een combinator is iets dat de relatie tussen de selectors verklaart.
Een CSS-selector kan meer dan één eenvoudige selector bevatten. Tussen de eenvoudige selectors kunnen we een combinator opnemen.
Er zijn vier verschillende combinators in CSS:
- afstammeling selector (spatie)
- kinderkiezer (>)
- aangrenzende broer of zus selector (+)
- algemene broer/zus selector (~)
Afstammelingkiezer
De afstammelingselector komt overeen met alle elementen die afstammelingen zijn van een opgegeven element.
In het volgende voorbeeld worden alle <p>-elementen binnen <div>-elementen geselecteerd:
Voorbeeld
div p {
background-color: yellow;
}
Kinderkiezer (>)
De onderliggende selector selecteert alle elementen die de onderliggende elementen zijn van een opgegeven element.
In het volgende voorbeeld worden alle <p>-elementen geselecteerd die onderliggende elementen zijn van een <div>-element:
Voorbeeld
div > p {
background-color: yellow;
}
Aangrenzende broer/zus-kiezer (+)
De aangrenzende broer of zus selector wordt gebruikt om een element te selecteren dat direct na een ander specifiek element staat.
Sibling-elementen moeten hetzelfde parent-element hebben en "aangrenzend" betekent "direct volgend".
In het volgende voorbeeld wordt het eerste <p>-element geselecteerd dat direct na <div>-elementen wordt geplaatst:
Voorbeeld
div + p {
background-color: yellow;
}
Algemene broer/zus-kiezer (~)
De algemene selector voor broers en zussen selecteert alle elementen die volgende broers en zussen zijn van een opgegeven element.
In het volgende voorbeeld worden alle <p>-elementen geselecteerd die de volgende broers en zussen zijn van <div>-elementen:
Voorbeeld
div ~ p {
background-color: yellow;
}
Alle CSS Combinator-kiezers
| 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 |