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:
<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:
#block h2 {
color: red;
}
En nou, kom ons kies die p vanuit die element met
id gelyk aan block, en kleur dit
groen:
#block p {
color: green;
}
Voorbeeld
Kom ons sê ons het nou die volgende kode:
<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:
#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:
#block h2.header {
color: red;
}
Praktiese Take
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:
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
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:
<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>
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:
<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>
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:
<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>
