Selektory

Cel:

Utrwalenie selektorów: tagów, klas, ID, potomków, dzieci, rodzeństwa, atrybutów oraz podstawowej specyficzności i dziedziczenia.

Kod HTML do stylowania

🎯 Polecenia CSS

🔵 1. Selektory podstawowe

1. Wszystkie akapity <p> ustaw na kolor niebieski.
2. Wszystkie nagłówki <h3> ustaw na kolor ciemnozielony.
3. Wszystkie elementy <span> ustaw na czerwony tekst.

🟢 2. Klasy i ID

1. Element z klasą .highlight ma mieć żółte tło.
2. Element .note ma mieć czarne tło i biały tekst.
3. Element z ID #main-title ustaw na ciemny fiolet i powiększ czcionkę.

🔴 3. Selektory złożone

1. Tylko akapity wewnątrz .box ustaw na ciemnoczerwony (selektor potomka).
2. Tylko bezpośrednie <li> w .menu ustaw na punktor square (selektor >).
3. Ustaw kolor szary dla akapitu znajdującego się zaraz po <h2> (selektor +).
4. Wszystkie elementy <p> będące rodzeństwem elementu <h1> ustaw na kolor brązowy (selektor ~).

🟣 4. Selektory atrybutów

1. Link z target="_blank" niech będzie fioletowy i podkreślony.
2. Każdy przycisk <button> z data-type="primary" ma mieć tło zielone i biały tekst.
3. Każdy przycisk z data-type="secondary" ma mieć tło szare.

🟡 5. Specyficzność

1. Dodaj regułę: .box p ma font-size: 14px.
2. Dodaj inną regułę: p.highlight ma font-size: 20px. ➡ Uczniowie powinni zaobserwować, że bardziej specyficzny selektor wygrywa.

🟤 6. Dziedziczenie

1. Ustaw dla body font-family: Arial i color: czarny. ➡ Wszystkie teksty powinny to odziedziczyć.
2. Dodaj styl color: inherit dla .note, aby przejęła kolor z rodzica .info.

⚫ 7. !important

1. Dodaj regułę, że wszystkie <p> mają kolor zielony z użyciem !important. ➡ Uczniowie obserwują, że nadpisuje wszystko inne.