Kombinator CSS

Kombinator CSS

Kombinator to mechanizm wyjaśniający relacje między wybieraczami.

Wybieracze CSS mogą zawierać wiele prostych wybieraczy. Między prostymi wybieraczami możemy umieścić kombinator.

W CSS istnieją cztery różne rodzaje kombinatorów:

  • Wybieracz potomka (przestrzeń)
  • Wybieracz potomka (>)
  • Uniwersalny wybieracz sąsiadów (+)
  • Uniwersalny wybieracz braci (~)

Wybieracz potomka

Wybieracz potomka pasuje do wszystkich potomków określonego elementu.

Poniższy przykład wybiera wszystkie elementy <p> wewnątrz elementu <div>:

Przykład

div p {
  background-color: yellow;
}

Spróbuj sam

Wybieracz potomka

Wybieracz potomka pasuje do wszystkich potomków określonego elementu.

Poniższy przykład wybiera wszystkie elementy <p> będące potomkami elementu <div>:

Przykład

div > p {
  background-color: yellow;
}

Spróbuj sam

Uniwersalny wybieracz sąsiadów

Uniwersalny wybieracz sąsiadów pasuje do wszystkich sąsiadów równorzędnymi określonego elementu.

Bracia (równorzędnymi) muszą mieć tego samego rodzica, 'sąsiedni' oznacza 'bezpośrednio po'.

Poniższy przykład wybiera wszystkie elementy <p> bezpośrednio po elementach <div>:

Przykład

div + p {
  background-color: yellow;
}

Spróbuj sam

Uniwersalny wybieracz braci

Uniwersalny wybieracz braci pasuje do wszystkich równorzędnymi elementami z określonym elementem.

Poniższy przykład wybiera wszystkie elementy <p> będące równorzędnymi elementami elementu <div>:

Przykład

div ~ p {
  background-color: yellow;
}

Spróbuj sam

Wszystkie kombinacyjne wybieracze CSS

Wybieracz Przykład Opis przykładu
element element div p Wybierz wszystkie elementy <p> wewnątrz elementu <div>.
element>element div > p Wybierz każdy element <p>, który ma element <div> jako rodzica.
element+element div + p Wybierz każdy element <p>, który jest bezpośrednio po elementie <div>.
element1~element2 p ~ ul Wybierz każdy element <ul>, który ma element <p> jako rodzica.

Rozszerzona lektura

Dodatkowe książki:Wybieracz potomka CSS

Dodatkowe książki:Wybieracz elementu potomka CSS

Dodatkowe książki:Wybieracz sąsiada CSS