CSS kombinátory
CSS kombinátory
Kombinátor je něco, co vysvětluje vztah mezi selektory.
Selektor CSS může obsahovat více než jeden jednoduchý selektor. Mezi jednoduché selektory můžeme zařadit kombinátor.
V CSS existují čtyři různé kombinátory:
- selektor potomka (mezera)
- dětský volič (>)
- sousedící volič sourozenců (+)
- obecný volič sourozenců (~)
Selektor potomků
Selektor potomka odpovídá všem prvkům, které jsou potomky zadaného prvku.
Následující příklad vybere všechny prvky <p> uvnitř prvků <div>:
Příklad
div p {
background-color: yellow;
}
Dětský výběr (>)
Podřízený selektor vybere všechny prvky, které jsou potomky zadaného prvku.
Následující příklad vybere všechny prvky <p>, které jsou potomky prvku <div>:
Příklad
div > p {
background-color: yellow;
}
Selektor sousedících sourozenců (+)
Sousední selektor sourozence se používá k výběru prvku, který je přímo za jiným konkrétním prvkem.
Sourozenecké prvky musí mít stejný nadřazený prvek a „sousední“ znamená „bezprostředně následující“.
Následující příklad vybere první prvek <p>, který je umístěn bezprostředně za prvky <div>:
Příklad
div + p {
background-color: yellow;
}
Obecný výběr sourozenců (~)
Obecný selektor sourozenců vybere všechny prvky, které jsou dalšími sourozenci zadaného prvku.
Následující příklad vybere všechny prvky <p>, které jsou dalšími sourozenci prvků <div>:
Příklad
div ~ p {
background-color: yellow;
}
Všechny selektory kombinátorů CSS
| 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 |