Brug af id i CSS
Ved brug af id er alle
manipulationer med selectore tilgængelige, som vi har studeret
i de foregående lektioner.
Eksempel
Lad os sige, at vi har følgende kode:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Lad os vælge h2 fra elementet med id,
lig med block, og farve det rød
farve:
#block h2 {
color: red;
}
Og lad os nu vælge p fra elementet med
id, lig med block, og farve
det i grøn farve:
#block p {
color: green;
}
Eksempel
Lad os nu sige, at vi har følgende 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>
Lad os vælge elementer med klassen header,
placeret inde i elementet med id,
lig med block, og farve dem
i rød farve:
#block .header {
color: red;
}
Og lad os nu vælge overskrifter h2 med klassen
header, placeret inde i elementet
med id, lig med block, og farve
dem i rød farve:
#block h2.header {
color: red;
}
Praktiske opgaver
Skriv en selector, der vælger alle h2,
placeret i elementet med id, lig med
elem. Kontroller din selector på følgende
kode:
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
Skriv en selector, der vælger alle elementer
med klassen text, placeret i elementet
med id, lig med elem. Kontroller
din selector på følgende 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>
Skriv en selector, der vælger alle afsnit
med klassen text, placeret i elementet
med id, lig med elem. Kontroller
din selector på følgende 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>
Skriv en selector, der vælger alle li
med klassen text, placeret i elementet
med id, lig med elem. Kontroller
din selector på følgende 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>
