Najnowsze tutoriale tworzenie stron internetowych
 

CSS kombinatorów

❮ Poprzedni Następny Rozdział ❯

CSS kombinatorów

Uwaga Syntezatora jest coś, co wyjaśnia zależność między selektorów.

Selektor CSS może zawierać więcej niż jeden prosty przełącznik. Między selektorów prostych, możemy zawierać COMBINATOR.

Istnieją cztery różne kombinatorów w CSS3:

  • selektor potomka (space)
  • Selektor dziecka (>)
  • sąsiaduje selektor rodzeństwa (+)
  • Ogólnie selektor rodzeństwa (~)

Selektor potomka

Selektor potomka pasuje do wszystkich elementów, które są potomkami określonego elementu.

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

Przykład

div p {
    background-color: yellow;
}
Spróbuj sam "

Selektor dziećmi

Selektor dziecko wybiera wszystkie elementy, które są bezpośrednimi dzieci określonego elementu.

Poniższy przykład wybiera wszystkie <p> elementy, które są natychmiastowe dzieci w <div> element:

Przykład

div > p {
    background-color: yellow;
}
Spróbuj sam "

Przylega Selector Rodzeństwo

Sąsiadująca selektor rodzeństwa wybiera wszystkie elementy, które są sąsiednie rodzeństwo określonego elementu.

Elementy rodzeństwo musi mieć ten sam element nadrzędny, a "w sąsiedztwie" oznacza "natychmiast po".

Poniższy przykład wybiera wszystkie <p> elementy, które są umieszczone bezpośrednio po <div> elementy:

Przykład

div + p {
    background-color: yellow;
}
Spróbuj sam "

Ogólne Rodzeństwo Selector

Ogólny selektor rodzeństwa wybiera wszystkie elementy, które są rodzeństwo określonego elementu.

Poniższy przykład wybiera wszystkie <p> elementy, które są rodzeństwo <div> elementy:

Przykład

div ~ p {
    background-color: yellow;
}
Spróbuj sam "

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»


❮ Poprzedni Następny Rozdział ❯