Kombinatory CSS
Kombinatory CSS
Kombinator to coś, co wyjaśnia związek między selektorami.
Selektor CSS może zawierać więcej niż jeden selektor prosty. Pomiędzy prostymi selektorami możemy zawrzeć kombinator.
W CSS istnieją cztery różne kombinatory:
- selektor potomka (spacja)
- selektor podrzędny (>)
- selektor sąsiedniego rodzeństwa (+)
- ogólny selektor rodzeństwa (~)
Selektor potomków
Selektor potomka pasuje do wszystkich elementów, które są potomkami określonego elementu.
Poniższy przykład wybiera wszystkie elementy <p> wewnątrz elementów <div>:
Przykład
div p {
background-color: yellow;
}
Selektor podrzędny (>)
Selektor dziecka wybiera wszystkie elementy, które są dziećmi określonego elementu.
Poniższy przykład wybiera wszystkie elementy <p>, które są dziećmi elementu <div>:
Przykład
div > p {
background-color: yellow;
}
Selektor sąsiedniego rodzeństwa (+)
Selektor sąsiedniego rodzeństwa służy do wybierania elementu, który znajduje się bezpośrednio po innym określonym elemencie.
Elementy rodzeństwa muszą mieć ten sam element nadrzędny, a „sąsiadujący” oznacza „natychmiast podążający”.
Poniższy przykład wybiera pierwszy element <p>, który jest umieszczony bezpośrednio po elementach <div>:
Przykład
div + p {
background-color: yellow;
}
Ogólny selektor rodzeństwa (~)
Selektor ogólnego rodzeństwa wybiera wszystkie elementy, które są kolejnym rodzeństwem określonego elementu.
Poniższy przykład zaznacza wszystkie elementy <p>, które są kolejnymi rodzeństwem elementów <div>:
Przykład
div ~ p {
background-color: yellow;
}
Wszystkie selektory kombinacji 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 |