W selektorach CSS zapis p > i oznacza relację rodzic–dziecko (tzw. child combinator). Element po lewej stronie, czyli <p>, jest rodzicem, a element po prawej stronie, czyli <i>, musi być jego bezpośrednim dzieckiem.
Dlatego reguła p > i { color: red; } zadziała tylko wtedy, gdy w HTML wystąpi sytuacja typu:
<p>Tekst <i>czerwony</i></p>
Jeżeli natomiast <i> znajduje się wewnątrz innego elementu w <p> (czyli jest potomkiem, ale nie dzieckiem), np.:
<p><span><i>to nie będzie dopasowane</i></span></p>
to selektor p > i go nie obejmie.
Odpowiedź "jedynie ten tekst w znaczniku <i>, który jest umieszczony bezpośrednio wewnątrz znacznika <p>" jest poprawna, bo dokładnie opisuje warunek kombinatora >.
Pozostałe propozycje są błędne, bo opisują inne mechanizmy:
- "każdy tekst w znaczniku <p> za wyjątkiem tych w znaczniku <i>" sugeruje stylowanie <p> i wykluczanie fragmentów, czego w tym selektorze nie ma (po prawej jest <i>, więc styl dotyczy <i>).
- "jedynie ten tekst znacznika <p>, do którego jest przypisana klasa o nazwie i" myli nazwę elementu i z klasą .i. Klasa w CSS byłaby zapisana z kropką, a tu jej nie ma.
- "każdy tekst w znaczniku <p> lub każdy tekst w znaczniku <i>" pasowałby do grupowania selektorów przecinkiem (np.
p, i
), a nie do relacji dziecka.
Wskazówka egzaminacyjna: jeśli widzisz znak >, od razu sprawdź w myślach, czy element po prawej stronie jest bezpośrednio w środku elementu po lewej stronie. To najczęstsze miejsce pomyłek.
