W CSS zapis selektora p, i { color: red; } oznacza, że kolor czerwony zostanie zastosowany do
A. tylko tego tekstu w znaczniku <p>, który ma przypisaną klasę o nazwie i
B. wyłącznie tekstu w znaczniku <i>, który znajduje się wewnątrz znacznika <p>
C. całego tekstu w znaczniku <p> z wyjątkiem tekstu w znaczniku <i>
D. całego tekstu w znaczniku <p> oraz całego tekstu w znaczniku <i>
Selektor p, i { color: red; } jest przykładem grupowania selektorów w CSS. Przecinek oznacza tutaj: zastosuj tę samą regułę do elementów p oraz do elementów i. Czyli przeglądarka nada kolor czerwony wszystkim akapitom p i wszystkim elementom i, niezależnie od tego, czy element i znajduje się w akapicie, w nagłówku, w liście czy gdziekolwiek indziej w dokumencie. To jest bardzo praktyczne, bo pozwala nie powtarzać kodu, np. zamiast pisać osobno p { color: red; } i i { color: red; }, można zapisać jedną wspólną regułę. Z mojego doświadczenia to jeden z tych zapisów CSS, które mocno porządkują arkusz stylów, szczególnie przy większych projektach. Warto też pamiętać, że spacja ma inne znaczenie niż przecinek: zapis p i oznaczałby element i wewnątrz p. Natomiast .i oznacza klasę o nazwie i. Dobra praktyka branżowa to świadome używanie selektorów, żeby kod był czytelny, krótki i łatwy do utrzymania.
W tym pytaniu łatwo pomylić kilka bardzo podobnie wyglądających zapisów CSS, a jednak każdy z nich działa inaczej. Przecinek w selektorze nie oznacza zagnieżdżenia ani warunku typu element musi być w środku innego elementu. Oznacza grupowanie selektorów, czyli wspólne przypisanie tej samej deklaracji do kilku różnych typów elementów. Dlatego p, i { color: red; } dotyczy osobno wszystkich elementów p i osobno wszystkich elementów i. Gdyby chodziło wyłącznie o tekst oznaczony elementem i znajdujący się wewnątrz akapitu, zapis wyglądałby inaczej: p i { color: red; }. Tam spacja jest selektorem potomka, więc dopiero wtedy CSS szuka elementu i wewnątrz p. Niepoprawne jest też myślenie, że reguła pomija elementy i wewnątrz p. CSS tak sam z siebie nie robi wyjątków; do wykluczania stosuje się inne mechanizmy, np. bardziej szczegółowe reguły, nadpisanie stylu albo pseudoklasę :not(), zależnie od sytuacji. Z kolei klasa o nazwie i musiałaby być zapisana jako .i, bo kropka w CSS oznacza selektor klasy. Samo i to selektor elementu HTML. Moim zdaniem najważniejsze jest tutaj zapamiętanie trzech znaków: przecinek grupuje, spacja oznacza potomka, a kropka oznacza klasę. To bardzo pomaga w praktycznym pisaniu arkuszy stylów i unikaniu dziwnych efektów na stronie.