Praktika na kombinace CSS selektorů
Napište selektor, který vybere odstavce,
umístěné uvnitř divů div. Otestujte
váš selektor na následujícím kódu:
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Napište selektor, který vybere všechny h2,
umístěné uvnitř divů div. Otestujte
váš selektor na následujícím kódu:
<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Napište selektor, který vybere všechny odstavce
p z elementu s id, rovným
block. Otestujte váš selektor na následujícím
kódu:
<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Napište selektor, který vybere všechny h2
z elementu s id, rovným block.
Otestujte váš selektor na následujícím kódu:
<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Napište selektor, který vybere všechny elementy
s třídou bbb. Otestujte váš selektor
na následujícím kódu:
<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>
Napište selektor, který vybere všechny elementy
s třídou bbb z elementu s id,
rovným block. Otestujte váš selektor
na následujícím kódu:
<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>
Napište selektor, který vybere všechny odstavce
p s třídou bbb. Otestujte
váš selektor na následujícím kódu:
<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>
Napište selektor, který vybere všechny h2
s třídou bbb. Otestujte váš selektor
na následujícím kódu:
<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>
Napište selektor, který vybere všechny odstavce
p s třídou bbb z elementu
s id, rovným block. Otestujte
váš selektor na následujícím kódu:
<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>
Napište selektor, který vybere všechny elementy
s třídou bbb a elementy s třídou
xxx současně (to znamená, že je třeba seskupit
selektory čárkou). Otestujte váš selektor
na následujícím kódu:
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Napište selektor, který vybere všechny odstavce
p s třídou bbb a současně
všechny h2 s třídou xxx. Otestujte
váš selektor na následujícím kódu:
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Napište selektor, který vybere všechny odstavce
p s třídou bbb z elementu
s id, rovným block a současně
všechny odstavce p s třídou xxx
z elementu s id, rovným block.
Otestujte váš selektor na následujícím kódu:
<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>
Napište selektor, který vybere všechny elementy
s třídou fff. Otestujte váš selektor
na následujícím kódu:
<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Napište selektor, který vybere všechny odstavce
p z elementu s třídou fff.
Otestujte váš selektor na
následujícím kódu:
<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Napište selektor, který vybere všechny odstavce
p s třídou fff. Otestujte
váš selektor na následujícím kódu:
<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Napište selektor, který vybere všechny elementy
s třídou bbb z elementu s třídou
fff. Otestujte váš selektor na následujícím
kódu:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Napište selektor, který vybere všechny h2
s třídou bbb z elementu s třídou
fff. Otestujte váš selektor na následujícím
kódu:
<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>
