Złożone kombinacje selektora potomków i klas w CSS
Załóżmy teraz, że mamy następujący kod:
<div class="block">
<h2 class="header">Tytuł h2</h2>
<p>
tekst
</p>
<h3 class="header">Tytuł h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div class="block">
<h2 class="header">Tytuł h2</h2>
<p>
tekst
</p>
<h3 class="header">Tytuł h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
Znajdźmy wszystkie elementy z klasą header,
znajdujące się wewnątrz elementu z klasą block,
i ustawmy im czcionkę Arial:
.block .header {
font-family: Arial;
}
Jak widać w kodzie HTML, wewnątrz elementu z
klasą block elementy z klasą header
mogą być zarówno nagłówkami h2, jak
i nagłówkami h3. Napiszmy
selektory, rozróżniające te nagłówki, i coś
zróbmy z tymi nagłówkami.
Wybierzmy wszystkie h2 z klasą header,
znajdujące się wewnątrz elementu z klasą block:
.block h2.header {
font-size: 30px;
color: red;
}
A teraz wybierzmy wszystkie h3 z klasą
header, znajdujące się wewnątrz elementu
z klasą block:
.block h3.header {
font-size: 20px;
color: green;
}
Zbierzmy cały nasz CSS razem:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Zastosujmy go do naszego kodu HTML:
Opowiedz, co wybiera selektor w podanym poniżej kodzie. Następnie napisz kod HTML, pasujący do tego selektora. Oto kod z selektorem:
.eee .bbb {
color: red;
}
Opowiedz, co wybiera selektor w podanym poniżej kodzie. Następnie napisz kod HTML, pasujący do tego selektora. Oto kod z selektorem:
.eee h2 {
color: red;
}
Opowiedz, co wybiera selektor w podanym poniżej kodzie. Następnie napisz kod HTML, pasujący do tego selektora. Oto kod z selektorem:
.eee h2.bbb {
color: red;
}
Opowiedz, co wybiera selektor w podanym poniżej kodzie. Następnie napisz kod HTML, pasujący do tego selektora. Oto kod z selektorem:
.eee h3.bbb {
color: red;
}
Opowiedz, co wybiera selektor w podanym poniżej kodzie. Następnie napisz kod HTML, pasujący do tego selektora. Oto kod z selektorem:
.eee p.bbb {
color: red;
}
Opowiedz, co wybiera selektor w podanym poniżej kodzie. Następnie napisz kod HTML, pasujący do tego selektora. Oto kod z selektorem:
.eee .bbb .kkk {
color: red;
}
