Reguła CSS ma postać: selektor + blok deklaracji. W zapisie li span { font-size: 10pt; color: green; } kluczowe jest to, jak działa selektor li span.
"li span" to tzw. selektor potomka (descendant combinator). Oznacza: "wybierz każdy element <span>, który znajduje się gdziekolwiek wewnątrz elementu <li> (na dowolnym poziomie zagnieżdżenia)". Styl nie jest nadawany elementowi <li>, tylko elementowi po prawej stronie selektora, czyli <span>.
Dlatego poprawna odpowiedź mówi o tym, że wielkość 10 pt (oraz kolor zielony) będzie dotyczyć tylko tekstu wewnątrz wszystkich znaczników <span> znajdujących się wewnątrz znaczników <li>.
Dlaczego pozostałe odpowiedzi są błędne?
- "tekst wewnątrz wszystkich znaczników li oraz wszystkich znaczników span" – błędnie zakłada, że reguła obejmuje oba typy elementów. Selektor nie jest listą elementów do stylowania, tylko warunkiem dopasowania dla elementu docelowego (<span>).
- "tekst wewnątrz wszystkich znaczników span" – pomija warunek kontekstu (<span> musi być wewnątrz <li>). Gdyby styl miał dotyczyć wszystkich <span>, selektor brzmiałby po prostu span.
- "tylko tekst wewnątrz wszystkich znaczników li znajdujących się wewnątrz znaczników span" – odwraca relację zagnieżdżenia. Zapis li span oznacza <span> w <li>, a nie <li> w <span>.
Wskazówka egzaminacyjna: czytaj selektor od lewej do prawej jako "kontekst", ale pamiętaj, że styl stosuje się do elementu po prawej stronie, który spełnia warunek bycia wewnątrz kontekstu.
