W języku CSS zdefiniowano formatowanie
p > i {color: blue}Oznacza to, że kolorem niebieskim zostanie zapisany
A. pochylony tekst paragrafu.
B. pogrubiony tekst paragrafu.
C. cały tekst paragrafu niezależnie od jego formatowania.
D. cały tekst nagłówków niezależnie od ich formatowania.
Selektor CSS p > i oznacza, że przeglądarka ma znaleźć elementy i, które są bezpośrednimi dziećmi elementu p, czyli znajdują się od razu wewnątrz paragrafu. Zapis color: blue ustawia kolor tekstu dla takiego elementu na niebieski. Dlatego poprawnie mówimy, że niebieski będzie pochylony tekst paragrafu, bo element i w HTML jest domyślnie wyświetlany kursywą, czyli tekstem pochylonym. W praktyce, jeśli w akapicie mamy zwykły tekst oraz fragment oznaczony elementem i, to tylko ten fragment dostanie kolor niebieski, a reszta paragrafu zostanie bez zmian, o ile nie działają inne reguły CSS. Ważny jest tutaj znak >, nazywany kombinatorem dziecka. On nie wybiera wszystkich elementów i gdziekolwiek głębiej w paragrafie, tylko te na najbliższym poziomie zagnieżdżenia. Moim zdaniem to jeden z tych selektorów, które warto dobrze opanować, bo pozwalają pisać CSS precyzyjnie, bez przypadkowego stylowania pół strony. W dobrych praktykach webowych takie selektory stosuje się wtedy, gdy struktura HTML jest przewidywalna i chcemy uniknąć nadmiernego używania klas.
W tym pytaniu łatwo pomylić działanie selektora CSS z ogólnym formatowaniem całego paragrafu. Zapis p > i nie oznacza, że reguła dotyczy całego elementu p. Gdyby styl miał objąć cały tekst paragrafu, selektor wyglądałby po prostu p, na przykład p { color: blue }. Tutaj jednak po lewej stronie reguły wskazano konkretny układ elementów: element i musi być bezpośrednio umieszczony w elemencie p. Dopiero wtedy dostaje właściwość color: blue. To dość typowy błąd myślowy: ktoś widzi literę p w selektorze i od razu zakłada, że stylowany jest paragraf, a w CSS ostatni element selektora jest zwykle tym, do którego faktycznie przypisuje się deklaracje.
Nie chodzi też o tekst pogrubiony. Pogrubienie w HTML kojarzy się raczej z elementami b albo strong, a nie z i. Element i tradycyjnie wyświetla tekst kursywą, chociaż we współczesnym HTML ma bardziej semantyczne znaczenie, np. wyróżnienie innego tonu wypowiedzi albo nazwy technicznej. Sama właściwość color zmienia kolor znaków, a nie grubość czy pochylenie tekstu.
Selektor nie ma też nic wspólnego z nagłówkami. Nagłówki to elementy h1, h2, h3 i tak dalej, więc musiałyby pojawić się w selektorze, aby reguła ich dotyczyła. Warto zapamiętać prostą zasadę: p > i czytamy jako element i będący bezpośrednim dzieckiem elementu p. Z mojego doświadczenia taka umiejętność czytania selektorów bardzo pomaga przy debugowaniu CSS w narzędziach deweloperskich przeglądarki, bo od razu widać, dlaczego dany styl działa albo nie działa.
Nie chodzi też o tekst pogrubiony. Pogrubienie w HTML kojarzy się raczej z elementami b albo strong, a nie z i. Element i tradycyjnie wyświetla tekst kursywą, chociaż we współczesnym HTML ma bardziej semantyczne znaczenie, np. wyróżnienie innego tonu wypowiedzi albo nazwy technicznej. Sama właściwość color zmienia kolor znaków, a nie grubość czy pochylenie tekstu.
Selektor nie ma też nic wspólnego z nagłówkami. Nagłówki to elementy h1, h2, h3 i tak dalej, więc musiałyby pojawić się w selektorze, aby reguła ich dotyczyła. Warto zapamiętać prostą zasadę: p > i czytamy jako element i będący bezpośrednim dzieckiem elementu p. Z mojego doświadczenia taka umiejętność czytania selektorów bardzo pomaga przy debugowaniu CSS w narzędziach deweloperskich przeglądarki, bo od razu widać, dlaczego dany styl działa albo nie działa.