TablicaPro / karta pracy ucznia / CSS

Selektory CSS — ćwiczenia z rozwiązaniami

Klasa: __________ Numer: __________ Data: __________

Pracuj w przygotowanym pliku. Po każdej zmianie zapisz go i sprawdź rezultat.

Kod do rozpoczęcia pracy

.karta p { color: #166534; }
.karta > p { text-decoration: underline; }
li:nth-child(even) { background: #e0f2fe; }

Zadanie 1

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

Zadanie 2

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

Zadanie 3

Napisz li:first-child (tło #fef9c3), li:nth-child(even) (tło #e0f2fe) i input[type="email"] (kolor ramki #dc2626). Sprawdź w konsoli wybrane elementy.

Sprawdź przed oddaniem

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. Razem 10 pkt.

Jaką zmianę w kodzie potrafisz samodzielnie wyjaśnić?

Drukuj kartę pracy