Praxis zu Kombinationen von CSS-Selektoren
Schreiben Sie einen Selektor, der die Absätze auswählt,
die sich innerhalb von div-Elementen befinden. Prüfen Sie
Ihren Selektor an folgendem Code:
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Schreiben Sie einen Selektor, der alle h2
auswählt, die sich innerhalb von div-Elementen befinden. Prüfen Sie
Ihren Selektor an folgendem Code:
<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Schreiben Sie einen Selektor, der alle Absätze
p aus dem Element mit der id
block auswählt. Prüfen Sie Ihren Selektor an folgendem
Code:
<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Schreiben Sie einen Selektor, der alle h2
aus dem Element mit der id block
auswählt. Prüfen Sie Ihren Selektor an folgendem Code:
<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Schreiben Sie einen Selektor, der alle Elemente
mit der Klasse bbb auswählt. Prüfen Sie Ihren Selektor
an folgendem Code:
<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>
Schreiben Sie einen Selektor, der alle Elemente
mit der Klasse bbb aus dem Element mit der id
block auswählt. Prüfen Sie Ihren Selektor
an folgendem Code:
<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>
Schreiben Sie einen Selektor, der alle Absätze
p mit der Klasse bbb auswählt. Prüfen Sie
Ihren Selektor an folgendem Code:
<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>
Schreiben Sie einen Selektor, der alle h2
mit der Klasse bbb auswählt. Prüfen Sie Ihren Selektor
an folgendem Code:
<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>
Schreiben Sie einen Selektor, der alle Absätze
p mit der Klasse bbb aus dem Element
mit der id block auswählt. Prüfen Sie
Ihren Selektor an folgendem Code:
<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>
Schreiben Sie einen Selektor, der alle Elemente
mit der Klasse bbb und Elemente mit der Klasse
xxx gleichzeitig auswählt (das heißt, Sie müssen die
Selektoren durch Kommas gruppieren). Prüfen Sie Ihren Selektor
an folgendem Code:
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Schreiben Sie einen Selektor, der alle Absätze
p mit der Klasse bbb und gleichzeitig
alle h2 mit der Klasse xxx auswählt. Prüfen Sie
Ihren Selektor an folgendem Code:
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Schreiben Sie einen Selektor, der alle Absätze
p mit der Klasse bbb aus dem Element
mit der id block und gleichzeitig
alle Absätze p mit der Klasse xxx
aus dem Element mit der id block auswählt.
Prüfen Sie Ihren Selektor an folgendem Code:
<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>
Schreiben Sie einen Selektor, der alle Elemente
mit der Klasse fff auswählt. Prüfen Sie Ihren Selektor
an folgendem Code:
<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Schreiben Sie einen Selektor, der alle Absätze
p aus dem Element mit der Klasse fff
auswählt. Prüfen Sie Ihren Selektor an
folgendem Code:
<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Schreiben Sie einen Selektor, der alle Absätze
p mit der Klasse fff auswählt. Prüfen Sie
Ihren Selektor an folgendem Code:
<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Schreiben Sie einen Selektor, der alle Elemente
mit der Klasse bbb aus dem Element mit der Klasse
fff auswählt. Prüfen Sie Ihren Selektor an folgendem
Code:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Schreiben Sie einen Selektor, der alle h2
mit der Klasse bbb aus dem Element mit der Klasse
fff auswählt. Prüfen Sie Ihren Selektor an folgendem
Code:
<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>
