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:

html<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ā:

css#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ā:

css#block p {
  color: green;
}

Piemērs

Pieņemsim, ka tagad mums ir šāds kods:

html<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ā:

css#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ā:

css#block h2.header {
  color: red;
}

Praktiskie uzdevumi

Задание 1

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:

html<div id="elem">
  <h2>Choose</h2>
  <p>---</p>
  
  <h2>Choose</h2>
  <p>---</p>
</div>

<h2>Do not +++</h2>
<p>---</p>

Задание 2

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:

html<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>

Задание 3

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:

html<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>

Задание 4

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:

html<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>