3. CSS3 - język opisu wyglądu

3.2. Selekcja oparta na relacji

Selektor potomków (spacja)
  • Wybiera wszystkie elementy potomne danego elementu.
div p {
    color: red;
}
Stylizuje wszystkie elementy <p>, które znajdują się wewnątrz elementu <div>.

Selektor bezpośredniego potomka ( > )
  • Wybiera elementy, które są bezpośrednimi dziećmi danego elementu.
div > p {
    color: blue;
}
Stylizuje tylko te elementy <p>, które są bezpośrednio wewnątrz <div>.

Selektor sąsiedniego rodzeństwa ( + )
  • Wybiera element, który znajduje się bezpośrednio po innym elemencie na tym samym poziomie hierarchii.
h1 + p {
    font-size: 18px;
}
Zmienia rozmiar czcionki pierwszego elementu <p> po każdym <h1>.

Selektor ogólnego rodzeństwa (~)
  • Wybiera wszystkie elementy będące rodzeństwem po wskazanym elemencie.
h1 ~ p {
    color: gray;
}
Zmienia kolor wszystkich elementów <p>, które są rodzeństwem <h1>.
Lektura uzupełniająca: W3Schools / CSS Combinators.