Pytanie 1
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>
A. Drugi.
B. Trzeci.
C. Czwarty.
D. Pierwszy.
Ź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.
