Användning av id i CSS
När du använder id är alla
manipulationer med selectorer tillgängliga,
som vi har lärt oss i tidigare lektioner.
Exempel
Låt oss säga att vi har följande kod:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Låt oss välja h2 från elementet med
id lika med block, och färga
det i rött:
#block h2 {
color: red;
}
Och låt oss nu välja p från elementet med
id lika med block, och färga
det i grönt:
#block p {
color: green;
}
Exempel
Låt oss nu säga att vi har följande kod:
<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>
Låt oss välja element med klassen header,
som finns inuti elementet med id,
lika med block, och färga dem
i rött:
#block .header {
color: red;
}
Och låt oss nu välja rubriker h2 med klassen
header, som finns inuti elementet
med id, lika med block, och färga
dem i rött:
#block h2.header {
color: red;
}
Praktiska uppgifter
Skriv en selector som väljer alla h2,
som finns i elementet med id, lika med
elem. Testa din selector på följande
kod:
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
Skriv en selector som väljer alla element
med klassen text, som finns i elementet
med id, lika med elem. Testa
din selector på följande kod:
<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 som väljer alla stycken
med klassen text, som finns i elementet
med id, lika med elem. Testa
din selector på följande kod:
<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 som väljer alla li
med klassen text, som finns i elementet
med id, lika med elem. Testa
din selector på följande kod:
<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>
