Kaskada i specyficzność CSS — dlaczego styl nie działa?

„Napisałem regułę, a kolor się nie zmienia” — to najczęstsze zgłoszenie początkujących w CSS. Zwykle winna jest kaskada: gdy kilka reguł dotyczy tego samego elementu, przeglądarka wybiera jedną według określonych zasad. Kto zna zasady, przewidzi wynik bez uruchamiania strony i szybko znajdzie przyczynę. Na lekcji uczniowie przewidują kolory sześciu akapitów, a potem sprawdzają się w narzędziach deweloperskich.

Scenariusz jest przeznaczony na 45 minut dla klasy znającej selektory klasy, identyfikatora i elementu — na przykład po pierwszej lekcji CSS.

Przygotowanie stanowisk

Potrzebne są przeglądarka z narzędziami deweloperskimi (F12) i edytor tekstu. Rozpakuj pakiet z sekcji materiałów do osobnego folderu. HTML w obu folderach jest taki sam i jej nie zmieniasz — pracujesz w start/style.css. Po zapisaniu pliku odśwież stronę. Wymiary elementów sprawdzisz w narzędziach deweloperskich (zakładka Elements, panel Computed). Gotowe rozwiązanie jest w folderze rozwiazanie. Internet nie jest wymagany.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• uszeregować selektory według specyficzności (element < klasa < identyfikator < styl w atrybucie);
• rozstrzygnąć konflikt reguł o równej specyficzności według kolejności w arkuszu;
• rozpoznać działanie dziedziczenia i !important;
• znaleźć w panelu Styles przyczynę, dla której reguła „nie działa”.

Jak przeglądarka wybiera regułę

1. !important wygrywa ze wszystkim innym (poza innym !important o większej specyficzności) — używaj go tylko w wyjątkowych sytuacjach.
2. Styl w atrybucie style="..." wygrywa z arkuszem.
3. Wśród reguł z arkusza wygrywa ta o większej specyficzności. Liczymy trzy liczby (identyfikatory, klasy i atrybuty i pseudoklasy, elementy):

- p → (0, 0, 1), - .x → (0, 1, 0), - .x.y → (0, 2, 0), - #p1 → (1, 0, 0), - #rodzic p → (1, 0, 1), - #rodzic .wazny → (1, 1, 0). Porównujemy liczby od lewej: jeden identyfikator wygra z dowolną liczbą klas.

1. Przy równej specyficzności wygrywa reguła zapisana później.
2. Reguła, która nie dotyczy elementu bezpośrednio, może zadziałać przez dziedziczenie (np. color rodzica przechodzi na dzieci) — ale dziedziczona wartość przegrywa z każdą regułą dotyczącą elementu wprost.

Przewidywane kolory w tym projekcie

• #p1 (class x): p (0,0,1), .x (0,1,0), #p1 (1,0,0) → wygrywa #p1 — zielony.
• #p2 (classes x y): p, .x, .x.y (0,2,0) → pomarańczowy.
• #p3 (bez klasy): tylko p → czerwony.
• #p4 (w #rodzic): p (0,0,1), #rodzic p (1,0,1) → brązowy (dziedziczone teal z rodzica przegrywa z regułą dla p).
• #p5 (class wazny): .wazny z !important → czarny, mimo że #rodzic .wazny (1,1,0) ma większą specyficzność.
• #p6 (styl w atrybucie): fioletowy.

Zadania

Zadanie 1. Przewidywanie. Bez uruchamiania strony zapisz kolor akapitów #p1–#p6. Dla każdego wskaż regułę, która wygrywa, i napisz jej specyficzność.

Zadanie 2. Sprawdzenie. W narzędziach deweloperskich (F12, panele Styles i Computed) sprawdź swoje przewidywania. Zapisz, które reguły są przekreślone i dlaczego.

Zadanie 3. Zmiana koloru. Zmień kolor akapitu #p2 na fioletowy bez użycia !important i bez zmiany HTML. Wskaż, jak zwiększyłaś/zwiększyłeś specyficzność.

Dla chętnych: dodaj regułę p { color: red !important; } i wyjaśnij, które akapity zmienią kolor oraz dlaczego !important utrudnia późniejszą pracę.

Rozwiązanie i wyniki

p {
  color: red;
}
.x {
  color: blue;
}
.x.y {
  color: orange;
}
#p1 {
  color: green;
}
#rodzic {
  color: teal;
}
#rodzic p {
  color: brown;
}
.wazny {
  color: black !important;
}
#rodzic .wazny {
  color: gray;
}

Kolory ustalone pomiarem w przeglądarce (getComputedStyle): #p1 — zielony (rgb(0, 128, 0)), #p2 — pomarańczowy (rgb(255, 165, 0)), #p3 — czerwony (rgb(255, 0, 0)), #p4 — brązowy (rgb(165, 42, 42)), #p5 — czarny (rgb(0, 0, 0)), #p6 — fioletowy (rgb(128, 0, 128)). Zadanie 3: wystarczy dodać na końcu arkusza regułę #p2 { color: purple; } — selektor z identyfikatorem (1,0,0) wygra z .x.y (0,2,0). Zadanie dla chętnych: po dodaniu p { color: red !important; } na czerwono zmienią się wszystkie akapity oprócz #p5, który ma własny !important w regule o wyższej specyficzności; na czerwono zmienia się także #p6, bo !important z arkusza wygrywa ze stylem w atrybucie style bez !important.

Typowe błędy

Pytania kontrolne i punktacja

1. Która reguła wygra: .x czy p? Dlaczego?
2. Co rozstrzyga konflikt dwóch reguł o tej samej specyficzności?
3. Dlaczego !important nazywa się „ostatecznością”?

Odpowiedzi: .x — klasa (0,1,0) ma większą specyficzność niż element (0,0,1). Kolejność w arkuszu: wygrywa reguła zapisana później. Bo wymusza wynik i utrudnia późniejsze zmiany; można go pokonać tylko kolejnym !important.

Proponowana punktacja (razem 10 punktów): zadanie 1 — sześć przewidywań 3 pkt, specyficzność reguł wygrywających 1 pkt; zadanie 2 — sprawdzenie w F12 i wyjaśnienie przekreśleń 2 pkt; zadanie 3 — poprawna reguła bez !important 2 pkt; wyjaśnienie 1 pkt; poprawny zapis CSS 1 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet CSS: materiały do lekcji, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej?

Następny krok to organizacja CSS (nazewnictwo klas, unikanie identyfikatorów w stylach) i zmienne CSS. Ten materiał rozwija dział o selektorach w kursie CSS w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: kaskada i dziedziczenie w MDN oraz specyficzność. Zobacz też lekcję o pierwszym CSS.