W języku CSS zapis selektora p > i { color: red;} oznacza, że kolorem czerwonym zostanie sformatowany
A. jedynie ten tekst znacznika <p>, do którego jest przypisana klasa o nazwie i
B. każdy tekst w znaczniku <p> za wyjątkiem tych w znaczniku <i>
C. każdy tekst w znaczniku <p> lub każdy tekst w znaczniku <i>
D. jedynie ten tekst w znaczniku <i>, który jest umieszczony bezpośrednio wewnątrz znacznika <p>
Pytanie z egzaminu CKE, czerwiec 2021 (arkusz EE.09-SG-21.06).
Selektor p > i oznacza zastosowanie stylu do elementu i, ale tylko wtedy, gdy ten element jest bezpośrednim dzieckiem elementu p. Znak > w CSS to tak zwany kombinator dziecka, czyli zawęża wybór do elementów znajdujących się dokładnie jeden poziom niżej w strukturze DOM. W praktyce zapis p > i { color: red; } sprawi, że czerwony kolor dostanie element i umieszczony od razu wewnątrz akapitu p. Jeśli między p a i pojawi się inny element, na przykład span, to taki i już nie zostanie wybrany przez ten selektor. To jest ważne przy bardziej rozbudowanych układach strony, bo pozwala stylować precyzyjnie i bez przypadkowego wpływania na zagnieżdżone elementy. Moim zdaniem warto zapamiętać różnicę między p i oraz p > i, bo to często robi zamieszanie. Zapis p i wybierałby każdy element i wewnątrz p, nawet głęboko zagnieżdżony, a p > i tylko bezpośredni. To dobra praktyka w CSS: używać selektorów na tyle dokładnych, żeby styl był przewidywalny, ale nie przesadnie skomplikowanych.
W tym selektorze łatwo pomylić kilka różnych mechanizmów CSS, bo zapis wygląda krótko, a jednak ma konkretne znaczenie. p > i nie oznacza alternatywy, więc nie formatuje osobno każdego tekstu w elemencie p albo każdego tekstu w elemencie i. Do wyboru kilku różnych selektorów używa się przecinka, na przykład p, i, a nie znaku >. Ten znak nie działa też jak odejmowanie czy wykluczenie. Gdyby chodziło o tekst w akapicie z pominięciem elementów i, trzeba byłoby myśleć o innych technikach, np. osobnym nadpisaniu stylu albo selektorach typu :not, choć w praktyce z dziedziczeniem koloru trzeba uważać. Błędne jest również traktowanie litery i jako nazwy klasy. W CSS klasa musi być poprzedzona kropką, czyli selektor klasy wyglądałby jak .i, a nie samo i. Samo i oznacza element HTML o nazwie i. Z mojego doświadczenia takie pomyłki biorą się z tego, że ktoś patrzy tylko na pojedyncze znaki, a nie na składnię selektora jako całość. Tutaj najważniejszy jest kombinator dziecka >, który mówi: wybierz element i znajdujący się bezpośrednio w elemencie p. Jeżeli element i jest głębiej, na przykład wewnątrz dodatkowego span w akapicie, reguła p > i już go nie obejmie. To właśnie precyzja selektorów jest jedną z podstaw porządnego CSS-a.