Praksis på kombinationer af CSS-selektorer
Skriv en selektor, der vælger afsnit,
placeret inde i divs div. Tjek
din selektor på følgende kode:
html<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Skriv en selektor, der vælger alle h2,
placeret inde i divs div. Tjek
din selektor på følgende kode:
html<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Skriv en selektor, der vælger alle afsnit
p fra elementet med id, lig med
block. Tjek din selektor på følgende
kode:
html<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Skriv en selektor, der vælger alle h2
fra elementet med id, lig med block.
Tjek din selektor på følgende kode:
html<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Skriv en selektor, der vælger alle elementer
med klassen bbb. Tjek din selektor
på følgende kode:
html<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>
Skriv en selektor, der vælger alle elementer
med klassen bbb fra elementet med id,
lig med block. Tjek din selektor
på følgende kode:
html<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>
Skriv en selektor, der vælger alle afsnit
p med klassen bbb. Tjek
din selektor på følgende kode:
html<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>
Skriv en selektor, der vælger alle h2
med klassen bbb. Tjek din selektor
på følgende kode:
html<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>
Skriv en selektor, der vælger alle afsnit
p med klassen bbb fra elementet
med id, lig med block. Tjek
din selektor på følgende kode:
html<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>
Skriv en selektor, der vælger alle elementer
med klassen bbb og elementer med klassen
xxx samtidigt (det vil sige, du skal gruppere
selektorerne med komma). Tjek din selektor
på følgende kode:
html<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Skriv en selektor, der vælger alle afsnit
p med klassen bbb og samtidigt
alle h2 med klassen xxx. Tjek
din selektor på følgende kode:
html<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Skriv en selektor, der vælger alle afsnit
p med klassen bbb fra elementet
med id, lig med block og samtidigt
alle afsnit p med klassen xxx
fra elementet med id, lig med block.
Tjek din selektor på følgende kode:
html<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>
Skriv en selektor, der vælger alle elementer
med klassen fff. Tjek din selektor
på følgende kode:
html<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Skriv en selektor, der vælger alle afsnit
p fra elementet med klassen fff.
Tjek din selektor på
følgende kode:
html<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Skriv en selektor, der vælger alle afsnit
p med klassen fff. Tjek
din selektor på følgende kode:
html<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Skriv en selektor, der vælger alle elementer
med klassen bbb fra elementet med klassen
fff. Tjek din selektor på følgende
kode:
html<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Skriv en selektor, der vælger alle h2
med klassen bbb fra elementet med klassen
fff. Tjek din selektor på følgende
kode:
html<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>