Die gebruik van id in CSS

Wanneer jy id gebruik, is alle manipulasies met kiesers beskikbaar wat ons in vorige lesse bestudeer het.

Voorbeeld

Kom ons sê ons het die volgende kode:

html<div id="block">
  <h2>Title</h2>
  <p>text</p>
  <p>text</p>
</div>

Kom ons kies die h2 vanuit die element met id gelyk aan block, en kleur dit rooi:

css#block h2 {
  color: red;
}

En nou, kom ons kies die p vanuit die element met id gelyk aan block, en kleur dit groen:

css#block p {
  color: green;
}

Voorbeeld

Kom ons sê ons het nou die volgende kode:

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>

Kom ons kies elemente met die klas header, wat binne die element met id gelyk aan block geleë is, en kleur hulle rooi:

css#block .header {
  color: red;
}

En nou kies ons die h2-opskrifte met die klas header, wat binne die element met id gelyk aan block geleë is, en kleur hulle rooi:

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

Praktiese Take

Задание 1

Skryf 'n kieser wat alle h2 sal kies, wat in die element met id gelyk aan elem geleë is. Toets jou kieser op die volgende kode:

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

<h2>Do not +++</h2>
<p>---</p>

Задание 2

Skryf 'n kieser wat alle elemente met die klas text sal kies, wat in die element met id gelyk aan elem geleë is. Toets jou kieser op die volgende kode:

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

Skryf 'n kieser wat alle paragrawe met die klas text sal kies, wat in die element met id gelyk aan elem geleë is. Toets jou kieser op die volgende kode:

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

Skryf 'n kieser wat alle li met die klas text sal kies, wat in die element met id gelyk aan elem geleë is. Toets jou kieser op die volgende kode:

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>