Het gebruik van id in CSS
Bij het gebruik van id zijn alle
manipulaties met selectors beschikbaar die we hebben geleerd
in de vorige lessen.
Voorbeeld
Stel dat we de volgende code hebben:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Laten we de h2 uit het element met id,
gelijk aan block, selecteren en deze rood
kleuren:
#block h2 {
color: red;
}
En laten we nu de p uit het element met
id, gelijk aan block, selecteren en deze
groen kleuren:
#block p {
color: green;
}
Voorbeeld
Stel dat we nu de volgende code hebben:
<div id="block">
<h2 class="header">Title</h2>
<p>text</p>
<p>text</p>
<h3 class="header">Title</h3>
<p>text</p>
<p>text</p>
</div>
Laten we elementen met de klasse header,
die zich binnen het element met id,
gelijk aan block bevinden, selecteren en ze
rood kleuren:
#block .header {
color: red;
}
En laten we nu koppen h2 met de klasse
header, die zich binnen het element
met id, gelijk aan block bevinden, selecteren en ze
rood kleuren:
#block h2.header {
color: red;
}
Praktische opdrachten
Schrijf een selector die alle h2,
die zich in het element met id, gelijk aan
elem bevinden, selecteert. Controleer je selector op de volgende
code:
<div id="elem">
<h2>Kies</h2>
<p>---</p>
<h2>Kies</h2>
<p>---</p>
</div>
<h2>Kies niet +++</h2>
<p>---</p>
Schrijf een selector die alle elementen
met de klasse text, die zich in het element
met id, gelijk aan elem bevinden, selecteert. Controleer
je selector op de volgende code:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Schrijf een selector die alle alinea's
met de klasse text, die zich in het element
met id, gelijk aan elem bevinden, selecteert. Controleer
je selector op de volgende code:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">---</li>
<li class="text">---</li>
<li class="text">---</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Schrijf een selector die alle li
met de klasse text, die zich in het element
met id, gelijk aan elem bevinden, selecteert. Controleer
je selector op de volgende code:
<div id="elem">
<p class="text">---</p>
<p class="text">---</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
