W języku CSS zapis selektora p + i { color: red;} oznacza, że kolorem czerwonym zostanie sformatowany
A. jedynie ten tekst w znaczniku <i>, który jest umieszczony bezpośrednio po znaczniku <p> na tym samym poziomie zagnieżdżenia
B. każdy tekst w znaczniku <p> lub każdy tekst w znaczniku <i>
C. jedynie ten tekst w znaczniku <i>, który jest umieszczony bezpośrednio wewnątrz znacznika <p>
D. jedynie ten tekst znacznika <p>, do którego jest przypisana klasa o nazwie i
Selektor p + i wykorzystuje w CSS tak zwany kombinator sąsiedniego rodzeństwa, czyli znak plus. Oznacza to, że reguła zadziała tylko na element i, który występuje bezpośrednio po elemencie p i ma tego samego rodzica w strukturze DOM. Innymi słowy: p i i muszą być na tym samym poziomie zagnieżdżenia, a między nimi nie może być innego elementu. Właściwość color: red zostanie zastosowana do elementu i, więc jego tekst odziedziczy czerwony kolor. Moim zdaniem to jeden z tych selektorów, które warto dobrze ogarnąć, bo pozwala stylować elementy zależnie od ich położenia w dokumencie, bez dokładania zbędnych klas. Praktyczny przykład: można wyróżnić krótką adnotację, ikonę albo dopisek kursywą tylko wtedy, gdy stoi zaraz po akapicie. Dobra praktyka jest taka, żeby używać takich selektorów świadomie, bo są zależne od struktury HTML. Jeśli ktoś później wstawi między p oraz i na przykład div albo span, selektor przestanie pasować.
W tym selektorze najważniejsze jest zrozumienie znaku plus, bo to nie jest ani selektor potomka, ani selektor dziecka, ani zapis klasy. Zapis p + i nie oznacza elementu i umieszczonego wewnątrz elementu p. Do wybierania elementu znajdującego się bezpośrednio wewnątrz innego elementu służyłby raczej selektor dziecka, na przykład p > i, a do dowolnego potomka zapis z odstępem, czyli p i. To częsty błąd, bo wiele osób widzi dwa selektory obok siebie i automatycznie myśli o zagnieżdżeniu, a tutaj relacja jest pozioma, nie pionowa w drzewie DOM. Ten zapis nie oznacza też sumy elementów p oraz i. Gdyby celem było sformatowanie wszystkich akapitów p i wszystkich elementów i, należałoby użyć przecinka: p, i. Przecinek w CSS działa jak lista selektorów, a plus wskazuje bezpośredniego następnego sąsiada. Nie chodzi również o klasę o nazwie i przypisaną do elementu p. Klasy w CSS zapisuje się z kropką, na przykład p.i albo p .i, zależnie od tego, czy klasa ma być na samym elemencie p, czy na jego potomku. W praktyce p + i wybiera tylko taki element i, który stoi zaraz po p i ma wspólnego rodzica. To jest precyzyjny selektor strukturalny, przydatny, ale wrażliwy na zmiany w układzie znaczników.