CSS-de aýratyn id-ä görä element saýlamak

Bilşiňiz ýaly, klasslar bir topara elementleri belläp bermek üçin niýetlenendir. Klasslardan başgada, elementleri aýratyn element identifikatory bolan id-e görä hem saýlap bolýar. Aýratynlygyň manysy şu: eger sahypamyzda şeýle id-li element bar bolsa, onda şol bir id-li beýleki element bolmaly däldir.

Aýratyn identifikator id atributy bilen berilýär, onuň içinde özümiziň oýlap tapýan atymyz ýazylýar. Geliň, meselem, iki blok düzeliň. Birinjisine id-ni block1 bahasynda bereliň, ikinjisine bolsa block2 bahasynda:

html<div id="block1">
  <p>tekst</p>
  <p>tekst</p>
</div>
<div id="block2">
  <p>tekst</p>
  <p>tekst</p>
</div>

Belläp berlen id-li elemente ýüz tutmak üçin # nyşanyny we özümiziň oýlap tapýan adymyzy şeýle ýazmaly:

css#block1 {
  color: red;
}
#block2 {
  color: green;
}

id atributy elementiň aýratynlygyny üpjün etmek zerur bolanda ulanylýar. Klasslar bolsa, haýşamaz köp element bolup biler ýagdaýynda, hatta häzir ýeke-täk bolsa-da ulanylýar.

Задание 1

Aşakdaky kod berlen:

html<div id="elem1">
  <h2>At</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div id="elem2">
  <h2>At</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div id="elem3">
  <h2>At</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>

elem1 blogynyň mazmunyny gyzyl reňke, elem2 blogynyň mazmunyny ýaşyl reňke, elem3 blogynyň mazmunyny bolsa gök reňke boýaň.