W tym zadaniu kluczowe jest zrozumienie, jak działają różne związki (kombinatory) selektorów w CSS i jak przekładają się one na strukturę drzewa DOM. Cały problem sprowadza się do relacji między znacznikami <p>, <b> i <i>. W kodzie <i> jest bezpośrednim dzieckiem paragrafu, natomiast <b> jest zupełnie osobnym elementem, który nie zawiera w sobie <i>. Jeżeli wybierzemy selektor oparty wyłącznie na listingu nazw znaczników obok siebie, typu „b i”, to w CSS oznacza on: „dowolny element <i> znajdujący się gdziekolwiek wewnątrz elementu <b>”. W naszym HTML nie ma takiej relacji, bo <i> nie jest potomkiem <b>, więc taki selektor zwyczajnie nie trafi w żaden element. To jest dość typowe myślenie: ktoś patrzy na kolejność znaczników w jednej linii i myli ją z hierarchią zagnieżdżenia.
Podobny problem występuje przy użyciu selektora „b > i”. Kombinator „>” oznacza dziecko bezpośrednie, więc „b > i” wybiera tylko te elementy <i>, które są jednym poziomem niżej w środku <b>. Ponownie, w naszym drzewie DOM <i> nie jest dzieckiem <b>, więc reguła w ogóle się nie zastosuje. Z mojego doświadczenia to częsty błąd: patrzymy na tekst „tekstu w pierwszym paragrafie” i intuicyjnie kojarzymy słowa, zamiast spojrzeć, jak naprawdę są zagnieżdżone tagi.
Jeszcze inna sytuacja dotyczy selektora „p + i”. Znak „+” to tzw. selektor sąsiadującego rodzeństwa (adjacent sibling). Oznacza: „wybierz element <i>, który stoi w DOM bezpośrednio po elemencie <p>, na tym samym poziomie zagnieżdżenia”. W naszym przykładzie <i> nie jest rodzeństwem <p>, tylko jego wnętrzem, więc ten kombinator kompletnie tu nie pasuje. To też jest dość mylące, bo część osób kojarzy „+” z jakimś rodzajem powiązania, ale nie pamięta, że chodzi o dwa znaczniki obok siebie, a nie jeden w środku drugiego.
Podsumowując, wszystkie błędne odpowiedzi ignorują faktyczną strukturę HTML i relacje rodzic–dziecko między elementami. Dobra praktyka jest taka, żeby przed wyborem selektora wyobrazić sobie drzewo DOM albo wręcz rozpisać je w formie wcięć. Dopiero potem dobiera się odpowiedni kombinator: spacja dla dowolnego potomka, „>” dla dziecka, „+” dla sąsiada, „~” dla dalszego rodzeństwa. Świadome korzystanie z tych narzędzi pozwala tworzyć precyzyjne, czytelne i łatwe w utrzymaniu arkusze CSS, zgodne z rekomendacjami W3C i dobrymi praktykami front-endowymi.
