Selektory CSS — ćwiczenia z rozwiązaniami

Selektor mówi przeglądarce, którym elementom nadać styl. Prosty selektor wybiera po nazwie znacznika, klasie albo identyfikatorze, a złożone potrafią wskazać „drugi element listy”, „pole typu e-mail” albo „akapit bezpośrednio wewnątrz karty”. Dobrze dobrany selektor oszczędza dopisywanie klas w HTML. Na lekcji uczniowie piszą dziewięć selektorów i liczą, ile elementów każdy z nich wybiera.

Scenariusz jest przeznaczony na 45 minut dla klasy po pierwszej lekcji CSS — na przykład po pierwszej lekcji CSS i lekcji o kaskadzie.

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:

• zapisać selektory typu, klasy i identyfikatora;
• odróżnić selektor potomka (spacja) od selektora bezpośredniego dziecka (>);
• użyć pseudoklas strukturalnych :first-child i :nth-child() oraz selektora atrybutu;
• policzyć, ile elementów wybiera dany selektor (querySelectorAll w konsoli).

Najważniejsze selektory

Różnicę między .karta p i .karta > p widać na zagnieżdżonym akapicie w section: pasuje do pierwszego selektora (jest potomkiem), ale nie do drugiego (nie jest dzieckiem .karta). W :nth-child(n) liczy się miejsce wśród wszystkich rodzeństwa, nie tylko tej samej klasy; wartości odd i even oznaczają nieparzyste i parzyste, a zapis 2n+1 — co drugi, zaczynając od pierwszego. Selektor atrybutu [type="email"] pozwala stylować bez dodatkowych klas.

Liczbę dopasowań sprawdzisz w konsoli: document.querySelectorAll("li:nth-child(even)").length. Specyficzność selektorów (klasa silniejsza od typu, identyfikator silniejszy od klasy) opisuje lekcja o kaskadzie.

Zadania

Zadanie 1. Proste selektory. Napisz selektory: li (kolor #1e3a8a), .wazne (pogrubienie) i #zajecia (ramka 1px solid #94a3b8). Policz, ile elementów wybiera każdy.

Zadanie 2. Potomek i dziecko. Napisz .karta p (kolor #166534) i .karta > p (podkreślenie). Ile akapitów trafia pod każdy selektor i dlaczego różnie?

Zadanie 3. Pseudoklasy i atrybut. Napisz li:first-child (tło #fef9c3), li:nth-child(even) (tło #e0f2fe) i input[type="email"] (kolor ramki #dc2626). Sprawdź w konsoli, które elementy zostały wybrane.

Dla chętnych: napisz selektor, który wybierze tylko trzeci element listy (li:nth-child(3)) i selektor, który wybierze wszystkie li z klasą wazne będące drugim lub czwartym dzieckiem.

Rozwiązanie i wyniki

li {
  color: #1e3a8a;
}
.wazne {
  font-weight: bold;
}
#zajecia {
  border: 1px solid #94a3b8;
}
.karta p {
  color: #166534;
}
.karta > p {
  text-decoration: underline;
}
li:first-child {
  background: #fef9c3;
}
li:nth-child(even) {
  background: #e0f2fe;
}
input[type="email"] {
  border-color: #dc2626;
}

Pomiary w przeglądarce (querySelectorAll): li — 4 elementy, .wazne — 2, #zajecia — 1, .karta p — 3, .karta > p — 2, li:first-child — 1, li:nth-child(even) — 2, input[type="email"] — 2. Zagnieżdżony akapit w section ma kolor rgb(22, 101, 52) (z .karta p), ale bez podkreślenia (nie jest dzieckiem .karta); pierwszy li ma tło rgb(254, 249, 195), drugi i czwarty — rgb(224, 242, 254).

Typowe błędy

Pytania kontrolne i punktacja

1. Czym różni się .karta p od .karta > p?
2. Które elementy wybiera li:nth-child(odd) w liście czterech elementów?
3. Jak zapiszesz selektor wszystkich pól typu e-mail?

Odpowiedzi: Pierwszy wybiera akapity na dowolnej głębokości wewnątrz .karta, drugi — tylko bezpośrednie dzieci. Pierwszy i trzeci. input[type="email"].

Proponowana punktacja (razem 10 punktów): zadanie 1 — trzy selektory 2 pkt, liczby elementów 1 pkt; zadanie 2 — dwa selektory 2 pkt, wyjaśnienie różnicy 1 pkt; zadanie 3 — dwie pseudoklasy 2 pkt, selektor atrybutu 1 pkt; sprawdzenie w konsoli 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 pseudoelementy, układ strony (Flexbox, Grid) i organizacja 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: selektory CSS w MDN oraz pseudoklasy. Zobacz też lekcję o kaskadzie.