Który paragraf w przedstawionym kodzie zostanie wyświetlony czcionką o kolorze niebieskim? <!DOCTYPE html>
<html>
<head>
<style>
div~p { color: blue; }
</style>
</head>
<body>
<div>
<p>pierwszy paragraf</p>
<div>
<p>drugi paragraf</p>
<p>trzeci paragraf</p>
</div>
<p>czwarty paragraf</p>
</div>
</body>
</html>
Poprawnie wskazany został czwarty paragraf, bo dokładnie tak działa selektor CSS użyty w tym przykładzie. Zapis `div~p` to tzw. selektor rodzeństwa (general sibling selector). Oznacza on: „wybierz każdy element `<p>`, który jest młodszym rodzeństwem jakiegokolwiek elementu `<div>` i znajduje się z nim na tym samym poziomie drzewa DOM (ma tego samego rodzica)”. Kluczowe są tu dwie rzeczy: ten sam rodzic oraz to, że dany element musi występować w kodzie **po** elemencie `div`. W podanym fragmencie HTML wszystkie paragrafy znajdują się wewnątrz jednego głównego `<div>`. Jednak tylko „czwarty paragraf” jest rodzeństwem zewnętrznego `<div>` i jednocześnie pojawia się po nim jako element `<p>` na tym samym poziomie zagnieżdżenia. „Pierwszy”, „drugi” i „trzeci” paragraf są zagnieżdżone wewnątrz divów, więc nie są rodzeństwem dla tagu `div`, do którego odnosi się selektor. W praktyce selektor `A~B` często stosuje się np. do stylowania elementów formularza i opisów, które pojawiają się po jakimś polu, albo do tworzenia efektów typu: „wszystkie akapity po tym bloku mają inny kolor”. Warto też znać różnicę między `div p` (wszystkie potomne akapity w divie), `div>p` (tylko bezpośrednie dzieci) oraz `div+p` (tylko pierwszy akapit bezpośrednio po divie). To są podstawowe narzędzia przy precyzyjnym stylowaniu struktury HTML zgodnie z dobrymi praktykami CSS i zaleceniami specyfikacji W3C.
Źródłem problemu w tym zadaniu jest zrozumienie, jak dokładnie działa selektor `div~p`. Na pierwszy rzut oka wiele osób patrzy po prostu na kolejność paragrafów w kodzie i zakłada, że skoro wewnątrz diva są kolejne `<p>`, to one wszystkie będą niebieskie. To jest typowe mieszanie działania selektora rodzeństwa z selektorem potomków. Zapis `div p` rzeczywiście oznaczałby „każdy paragraf znajdujący się gdziekolwiek wewnątrz diva”, ale w pytaniu użyto operatora tyldy `~`, który ma inne znaczenie. Selektor `div~p` wskazuje elementy `<p>`, które są rodzeństwem elementu `<div>`, czyli mają tego samego rodzica w drzewie DOM, i jednocześnie występują po nim w kodzie. To oznacza, że przeglądarka w ogóle nie patrzy na paragrafy zagnieżdżone głębiej, np. w dodatkowym `<div>` w środku. One nie są rodzeństwem, tylko potomkami, więc selektor ich nie obejmuje. Częsty błąd polega też na myleniu selektora `div~p` z `div+p`. Ten drugi wybiera wyłącznie pierwszy paragraf bezpośrednio po divie na tym samym poziomie, natomiast `~` obejmuje wszystkie późniejsze rodzeństwa danego typu. W tym przykładzie jedynym `<p>`, który jest na tym samym poziomie co zewnętrzny `<div>` i stoi po nim, jest „czwarty paragraf”. Pozostałe, mimo że wizualnie znajdują się „w środku” tego diva, nie są rodzeństwem, tylko są bardziej zagnieżdżone. Z mojego doświadczenia wynika, że dopóki nie narysuje się sobie drzewa DOM albo nie podejrzy struktury w DevTools, bardzo łatwo o takie pomyłki. Dobra praktyka w CSS to zawsze myśleć o relacjach: rodzic–dziecko, rodzeństwo, potomek, a dopiero potem o kolejności w kodzie. Dzięki temu selektory są pisane świadomie, bardziej precyzyjnie i nie powodują niespodziewanych efektów w większych projektach.