Ćwiczenia z selektorów CSS

Zadania

Stwórz selektory wybierające tylko elementy, które zawierają tekst „wybierz mnie!” w poniższych przykładach.

1

 <foo>wybierz mnie!</foo>
 <bar>nie mnie, ale <foo>wybierz mnie!</foo></bar>

2

 <foo>nie mnie</foo>
 <bar>nie mnie, ale <foo>wybierz mnie!</foo></bar>

3

 <bar>nie mnie <baz><foo>mnie nie bierz!</foo></baz></bar>
 <bar>nie mnie, ale <foo>wybierz mnie!</foo></bar>

4

 <foo class="bar">nie mnie</foo>
 <foo class="quz bar">wybierz mnie!</foo>
 <foo class="quz">nie mnie!</foo>

5

 <foo class="bar">nie mnie</foo>
 <foo class="quz">nie mnie<foo class="bar">wybierz mnie!</foo></foo>
 <foo class="quz">nie mnie!</foo>

Odpowiedzi

1

 foo
 Selektor elementu

2

 bar foo
 Kombinator potomka ogranicza tylko do zawartości <bar>

3

 bar > foo
 Kombinator dziecka nie pasuje do pozostałych potomków

4

 .quz.bar
 Element może posiadać kilka klas. Kolejność nie ma znaczenia.

5

 .quz .bar
 Spacja tworzy kombinator potomka. Kolejność ma znaczenie.

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

• Spis treści
• Kroki
• Strona Główna
• Ilustracje
• Historia zmian
• Edytuj