Bruk av id i CSS
Ved bruk av id er alle
manipulasjoner med selectorer tilgjengelige, som vi studerte
i de foregående leksjonene.
Eksempel
La oss si vi har følgende kode:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
La oss velge h2 fra elementet med id,
lik block, og farge den rød:
#block h2 {
color: red;
}
Og la oss nå velge p fra elementet med
id, lik block, og farge den
grønn:
#block p {
color: green;
}
Eksempel
La oss nå si 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>
La oss velge elementer med klassen header,
som befinner seg inni elementet med id,
lik block, og farge dem
røde:
#block .header {
color: red;
}
Og la oss nå velge overskrifter h2 med klassen
header, som befinner seg inni elementet
med id, lik block, og farge dem
røde:
#block h2.header {
color: red;
}
Praktiske oppgaver
Skriv en selector som velger alle h2,
som befinner seg i elementet med id, lik
elem. Test selectoren din 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 som velger alle elementer
med klassen text, som befinner seg i elementet
med id, lik elem. Test
selectoren din 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 som velger alle avsnitt
med klassen text, som befinner seg i elementet
med id, lik elem. Test
selectoren din 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 som velger alle li
med klassen text, som befinner seg i elementet
med id, lik elem. Test
selectoren din 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>
