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:

html<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:

css#block h2 {
  color: red;
}

En laten we nu de p uit het element met id, gelijk aan block, selecteren en deze groen kleuren:

css#block p {
  color: green;
}

Voorbeeld

Stel dat we nu de volgende code hebben:

html<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:

css#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:

css#block h2.header {
  color: red;
}

Praktische opdrachten

Задание 1

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:

html<div id="elem">
  <h2>Kies</h2>
  <p>---</p>
  
  <h2>Kies</h2>
  <p>---</p>
</div>

<h2>Kies niet +++</h2>
<p>---</p>

Задание 2

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:

html<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>

Задание 3

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:

html<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>

Задание 4

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:

html<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>