W języku CSS zdefiniowano następujące formatowanie.
h1 i {color: red;}Kolorem czerwonym zostanie zapisany
A. tylko tekst pochylony we wszystkich poziomach nagłówków.
Źle. Reguła wymienia tylko
<h1>, inne poziomy nagłówków jej nie podlegają.B. cały tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu.
Źle. Selektor nie obejmuje całego nagłówka ani akapitów, tylko kursywę w
<h1>.C. tylko tekst pochylony nagłówka pierwszego stopnia.
Dobrze. Selektor potomka wybiera tylko
<i> umieszczone wewnątrz <h1>.D. cały tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, niezależnie od tego, w którym miejscu strony się znajduje.
Źle. Tak działałaby grupa
h1, i z przecinkiem, a tu jest spacja.Pytanie z egzaminu CKE, styczeń 2017 (arkusz E.14-X-17.01).
Zapis
h1 i to selektor potomka: dwie nazwy oddzielone spacją oznaczają element <i> znajdujący się gdziekolwiek wewnątrz <h1>. Czerwony kolor dostanie więc wyłącznie pochylony tekst w nagłówku pierwszego stopnia, a reszta nagłówka i kursywa w akapitach zostaną bez zmian. Do zapamiętania: spacja zawęża wybór do zagnieżdżenia, przecinek go rozszerza. Zapis h1, i pokolorowałby cały nagłówek i każdą kursywę na stronie, a h1 > i tylko bezpośrednie dzieci nagłówka. Takie selektory pozwalają stylować elementy w konkretnym miejscu strony bez dodawania im klas. Ten sam mechanizm działa dla klas, na przykład .menu a.Problem z tym pytaniem najczęściej wynika z pomylenia spacji z przecinkiem w selektorze. Wariant o całym nagłówku i całej kursywie na stronie opisuje grupę
h1, i, w której przecinek oznacza „oraz”. Wariant o całym nagłówku i kursywie akapitu łączy dwa różne selektory, których tu nie ma. Wersja z kursywą we wszystkich poziomach nagłówków wymagałaby wymienienia ich wszystkich, na przykład h1 i, h2 i, h3 i, a reguła dotyczy tylko <h1>. Selektor h1 i bez przecinka czyta się od prawej: element <i>, ale tylko ten, który leży wewnątrz <h1>. Gdyby autor chciał pokolorować kursywę we wszystkich nagłówkach, mógłby też nadać im wspólną klasę. Żeby uniknąć pomyłek, czytaj selektor od prawej do lewej: ostatni element to ten, który dostaje styl, a wcześniejsze określają, w czym musi się znajdować.