W CSS kolor tła (np. przez background lub background-color) zostanie zastosowany tylko do tych elementów, które spełniają warunek selektora. Sam fakt, że w arkuszu stylów występuje reguła z kolorem Teal, nie oznacza jeszcze, że dostaną go wszystkie pola formularza.
Aby policzyć, do ilu pól edycyjnych przypisze się tło Teal, wykonuje się zawsze tę samą analizę:
- Krok 1: identyfikacja pól edycyjnych w pokazanym fragmencie HTML (najczęściej będą to m.in. input i textarea, ale zależy od kodu).
- Krok 2: sprawdzenie dopasowania selektorów – czy reguła z Teal dotyczy danego elementu (np. po klasie, identyfikatorze, typie elementu lub po relacji w drzewie DOM).
- Krok 3: kaskada i specyficzność – nawet jeśli element pasuje do reguły "Teal", to końcowy kolor tła może zostać zmieniony przez inną regułę o większej specyficzności albo przez regułę występującą później w CSS (przy tej samej specyficzności).
- Krok 4: dziedziczenie – tło zwykle nie działa tak, jak wielu uczniów intuicyjnie zakłada. Jeśli tło ustawiono na kontenerze, nie znaczy to automatycznie, że pole input/textarea przejmie ten sam kolor tła, jeśli nie wynika to z dopasowania selektora do samego pola.
Poprawna odpowiedź brzmi: "Do dwóch." Oznacza to, że w przedstawionym zestawie reguł CSS i elementów HTML tylko dwa pola edycyjne końcowo (po uwzględnieniu nadpisań) mają tło Teal.
Dlaczego pozostałe odpowiedzi są niepoprawne?
- "Do żadnego." byłoby prawdziwe tylko wtedy, gdy żadna reguła z Teal nie pasowała do pól lub gdy każda taka reguła została skutecznie nadpisana inną wartością tła.
- "Do wszystkich." wymagałoby, aby selektor obejmował wszystkie pola edycyjne i nie było wyjątków ani nadpisań dla części z nich.
- "Do trzech." sugeruje, że trzy pola spełniają warunki selektora i kaskady; wynik zadania wskazuje jednak na dwa elementy końcowo stylowane kolorem Teal.
W praktyce na egzaminie najszybciej weryfikuje się to, "przechodząc" po każdym polu i sprawdzając, która reguła wygrywa w kaskadzie.
