ID izmantošana CSS
Izmantojot id, ir pieejamas visas
manipulācijas ar selektoriem, kuras mēs apguvām
iepriekšējās nodarbībās.
Piemērs
Pieņemsim, ka mums ir šāds kods:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Izvēlēsimies h2 no elementa ar id,
kas vienāds ar block, un iekrāsosim to sarkanā
krāsā:
#block h2 {
color: red;
}
Un tagad izvēlēsimies p no elementa ar
id, kas vienāds ar block, un iekrāsosim
to zaļā krāsā:
#block p {
color: green;
}
Piemērs
Pieņemsim, ka tagad mums ir šāds kods:
<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>
Izvēlēsimies elementus ar klasi header,
kas atrodas elementā ar id,
kas vienāds ar block, un iekrāsosim tos
sarkanā krāsā:
#block .header {
color: red;
}
Un tagad izvēlēsimies virsrakstus h2 ar klasi
header, kas atrodas elementā
ar id, kas vienāds ar block, un iekrāsosim
tos sarkanā krāsā:
#block h2.header {
color: red;
}
Praktiskie uzdevumi
Uzrakstiet selektoru, kas izvēlēsies visus h2,
kas atrodas elementā ar id, kas vienāds ar
elem. Pārbaudiet savu selektoru uz šāda
koda:
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
Uzrakstiet selektoru, kas izvēlēsies visus elementus
ar klasi text, kas atrodas elementā
ar id, kas vienāds ar elem. Pārbaudiet
savu selektoru uz šāda koda:
<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>
Uzrakstiet selektoru, kas izvēlēsies visus rindkopas
ar klasi text, kas atrodas elementā
ar id, kas vienāds ar elem. Pārbaudiet
savu selektoru uz šāda koda:
<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>
Uzrakstiet selektoru, kas izvēlēsies visus li
ar klasi text, kas atrodas elementā
ar id, kas vienāds ar elem. Pārbaudiet
savu selektoru uz šāda koda:
<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>
