W CSS, aby poprawnie wskazać elementy do formatowania, trzeba rozróżnić trzy rzeczy: typ elementu (np. p, div), klasę (zapis z kropką) oraz identyfikator (zapis z #).
Odpowiedź p.tekst, div#obrazki jest poprawna, ponieważ:
p.tekst
oznacza: "wszystkie elementy p, które mają klasę tekst". Kropka . w selektorze łączy nazwę elementu z nazwą klasy.div#obrazki
oznacza: "element div o identyfikatorze obrazki". Znak # wskazuje atrybut id.- Przecinek między selektorami tworzy listę selektorów (grupowanie). Jedna reguła CSS zastosuje się do każdego selektora z listy niezależnie.
Dlaczego pozostałe propozycje są błędne?
p#tekst, div.obrazki
odwraca znaczenie atrybutów: p#tekst
wymaga id=tekst (nie klasy), a div.obrazki
wymaga klasy obrazki (nie id). To nie odpowiada treści pytania.p.tekst + div#obrazki
używa kombinatora +, czyli selektora "sąsiedniego brata". Taki zapis wybiera element div#obrazki
tylko wtedy, gdy występuje bezpośrednio po p.tekst
w drzewie DOM. Pytanie nie stawia warunku sąsiedztwa, tylko mówi o formatowaniu dwóch niezależnych elementów.p#tekst + div.obrazki
ma dwa problemy naraz: myli id z klasą (p#tekst
, div.obrazki
) oraz dodatkowo wprowadza warunek sąsiedztwa przez +. To czyni selektor jeszcze bardziej niezgodnym z opisem.
Wskazówka egzaminacyjna: jeśli w pytaniu trzeba wskazać "element X oraz element Y" bez relacji między nimi, najczęściej używa się przecinka (grupowanie). Kombinatory typu +, > czy spacja stosuje się dopiero, gdy pytanie opisuje relację w strukturze dokumentu.
