Praktyka kombinacji selektorów CSS
Napisz selektor, który wybierze akapity
znajdujące się wewnątrz divów div. Sprawdź
swój selektor na poniższym kodzie:
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Napisz selektor, który wybierze wszystkie h2,
znajdujące się wewnątrz divów div. Sprawdź
swój selektor na poniższym kodzie:
<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Napisz selektor, który wybierze wszystkie akapity
p z elementu o id równym
block. Sprawdź swój selektor na poniższym
kodzie:
<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Napisz selektor, który wybierze wszystkie h2
z elementu o id równym block.
Sprawdź swój selektor na poniższym kodzie:
<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Napisz selektor, który wybierze wszystkie elementy
z klasą bbb. Sprawdź swój selektor
na poniższym kodzie:
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
+++
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
Napisz selektor, który wybierze wszystkie elementy
z klasą bbb z elementu o id
równym block. Sprawdź swój selektor
na poniższym kodzie:
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
Napisz selektor, który wybierze wszystkie akapity
p z klasą bbb. Sprawdź
swój selektor na poniższym kodzie:
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
Napisz selektor, który wybierze wszystkie h2
z klasą bbb. Sprawdź swój selektor
na poniższym kodzie:
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
Napisz selektor, który wybierze wszystkie akapity
p z klasą bbb z elementu
o id równym block. Sprawdź
swój selektor na poniższym kodzie:
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
Napisz selektor, który wybierze wszystkie elementy
z klasą bbb i elementy z klasą
xxx jednocześnie (czyli należy zgrupować
selektory po przecinku). Sprawdź swój selektor
na poniższym kodzie:
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Napisz selektor, który wybierze wszystkie akapity
p z klasą bbb i jednocześnie
wszystkie h2 z klasą xxx. Sprawdź
swój selektor na poniższym kodzie:
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Napisz selektor, który wybierze wszystkie akapity
p z klasą bbb z elementu
o id równym block i jednocześnie
wszystkie akapity p z klasą xxx
z elementu o id równym block.
Sprawdź swój selektor na poniższym kodzie:
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">---</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
---
</div>
<div class="xxx">
---
</div>
</div>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Napisz selektor, który wybierze wszystkie elementy
z klasą fff. Sprawdź swój selektor
na poniższym kodzie:
<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Napisz selektor, który wybierze wszystkie akapity
p z elementu z klasą fff.
Sprawdź swój selektor na
poniższym kodzie:
<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Napisz selektor, który wybierze wszystkie akapity
p z klasą fff. Sprawdź
swój selektor na poniższym kodzie:
<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Napisz selektor, który wybierze wszystkie elementy
z klasą bbb z elementu z klasą
fff. Sprawdź swój selektor na poniższym
kodzie:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Napisz selektor, który wybierze wszystkie h2
z klasą bbb z elementu z klasą
fff. Sprawdź swój selektor na poniższym
kodzie:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p class="bbb">
---
</p>
</div>
<h2 class="bbb">---</h2>
<p class="bbb">
---
</p>
<p class="fff">
---
</p>
