Kurs HTML

Wprowadzenie: Wybieranie elementów obok siebie

Oprócz relacji rodzic-dziecko/potomek, CSS pozwala również wybierać elementy na podstawie ich relacji z **rodzeństwem** (siblings) - elementami, które mają tego samego rodzica i znajdują się na tym samym poziomie w drzewie DOM.

Istnieją dwa główne selektory rodzeństwa: selektor sąsiadującego rodzeństwa (+) i selektor ogólnego rodzeństwa (~).

Selektor sąsiadującego rodzeństwa (+)

Selektor sąsiadującego rodzeństwa, zapisywany jako znak plusa (+) między dwoma selektorami (np. h2 + p), wybiera element pasujący do drugiego selektora (p), który znajduje się **bezpośrednio po** elemencie pasującym do pierwszego selektora (h2) i **mają tego samego rodzica**.

Innymi słowy, wybiera tylko **pierwszego** brata/siostrę danego typu, który następuje bezpośrednio po określonym elemencie.

<div class="article">
  <h2>Nagłówek 1</h2>
  <p>Paragraf 1 (bezpośrednio po h2)</p>
  <p>Paragraf 2 (nie bezpośrednio po h2)</p>
  <h2>Nagłówek 2</h2>
  <div>Inny element</div>
  <p>Paragraf 3 (nie bezpośrednio po h2)</p>
</div>Kopiuj

/* Wybierz paragraf (p), który znajduje się BEZPOŚREDNIO po nagłówku h2 */
h2 + p {
  color: green;
  font-style: italic;
}
Kopiuj

W powyższym przykładzie, tylko **Paragraf 1** zostanie wybrany przez selektor h2 + p, ponieważ jest to pierwszy paragraf znajdujący się bezpośrednio po pierwszym h2. Paragraf 2 nie jest bezpośrednio po h2, a Paragraf 3 jest oddzielony od drugiego h2 przez element div.

Selektor + jest przydatny do stylizowania elementów w specyficzny sposób tylko wtedy, gdy poprzedza je określony element, np. dodanie marginesu górnego do paragrafu, który następuje po nagłówku.

Selektor ogólnego rodzeństwa (~)

Selektor ogólnego rodzeństwa, zapisywany jako tylda (~) między dwoma selektorami (np. h2 ~ p), wybiera **wszystkie** elementy pasujące do drugiego selektora (p), które znajdują się **po** elemencie pasującym do pierwszego selektora (h2) i **mają tego samego rodzica**.

W przeciwieństwie do +, selektor ~ wybiera wszystkich braci/siostry danego typu, którzy występują później, a nie tylko tego bezpośrednio następującego.

<!-- Użyjemy tego samego HTML co poprzednio -->
<div class="article">
  <h2>Nagłówek 1</h2>
  <p>Paragraf 1 (po h2)</p>
  <p>Paragraf 2 (po h2)</p>
  <h2>Nagłówek 2</h2>
  <div>Inny element</div>
  <p>Paragraf 3 (po h2)</p>
</div>Kopiuj

/* Wybierz WSZYSTKIE paragrafy (p), które znajdują się PO nagłówku h2 */
/* i mają tego samego rodzica */
h2 ~ p {
  text-decoration: underline;
  color: purple;
}
Kopiuj

W powyższym przykładzie, selektor h2 ~ p wybierze **Paragrafy 1, 2 i 3**. Dlaczego?

• Paragraf 1 i 2 znajdują się po pierwszym h2 i mają tego samego rodzica (div.article).
• Paragraf 3 znajduje się po drugim h2 i ma tego samego rodzica (div.article).

Selektor ~ jest mniej restrykcyjny niż + i pozwala stylizować wszystkie elementy rodzeństwa występujące po określonym elemencie.

Ważne uwagi

• Oba selektory (+ i ~) biorą pod uwagę tylko rodzeństwo, które występuje **po** pierwszym elemencie w kodzie HTML. Nie wybierają rodzeństwa, które znajduje się wcześniej.
• Elementy muszą mieć **tego samego bezpośredniego rodzica**, aby były uważane za rodzeństwo.