Complexe combinaties van descendant selectors en classes in CSS
Stel dat we nu de volgende code hebben:
<div class="block">
<h2 class="header">Titel h2</h2>
<p>
tekst
</p>
<h3 class="header">Titel h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div class="block">
<h2 class="header">Titel h2</h2>
<p>
tekst
</p>
<h3 class="header">Titel h3</h3>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
Laten we alle elementen met de klasse header vinden,
die zich binnen een element met de klasse block bevinden,
en ze het lettertype Arial geven:
.block .header {
font-family: Arial;
}
Zoals te zien is in de HTML code, kunnen binnen een element met
de klasse block elementen met de klasse header
zowel koppen h2 als koppen h3 zijn. Laten we
selectors schrijven die deze koppen onderscheiden, en iets
met deze koppen doen.
Laten we alle h2 met de klasse header selecteren,
die zich binnen een element met de klasse block bevinden:
.block h2.header {
font-size: 30px;
color: red;
}
En laten we nu alle h3 met de klasse
header selecteren, die zich binnen een element
met de klasse block bevinden:
.block h3.header {
font-size: 20px;
color: green;
}
Laten we al onze CSS samenvoegen:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Laten we dit toepassen op onze HTML code:
Leg uit wat de selector in de onderstaande code selecteert. Schrijf vervolgens HTML code die voldoet aan deze selector. Hier is de code met de selector:
.eee .bbb {
color: red;
}
Leg uit wat de selector in de onderstaande code selecteert. Schrijf vervolgens HTML code die voldoet aan deze selector. Hier is de code met de selector:
.eee h2 {
color: red;
}
Leg uit wat de selector in de onderstaande code selecteert. Schrijf vervolgens HTML code die voldoet aan deze selector. Hier is de code met de selector:
.eee h2.bbb {
color: red;
}
Leg uit wat de selector in de onderstaande code selecteert. Schrijf vervolgens HTML code die voldoet aan deze selector. Hier is de code met de selector:
.eee h3.bbb {
color: red;
}
Leg uit wat de selector in de onderstaande code selecteert. Schrijf vervolgens HTML code die voldoet aan deze selector. Hier is de code met de selector:
.eee p.bbb {
color: red;
}
Leg uit wat de selector in de onderstaande code selecteert. Schrijf vervolgens HTML code die voldoet aan deze selector. Hier is de code met de selector:
.eee .bbb .kkk {
color: red;
}
