Elementin valinta yksilöllisellä id:llä CSS:ssä

Kuten jo tiedät, luokat on tarkoitettu liitettäväksi elementtiryhmään. Luokkien lisäksi elementtejä voidaan valita myös id:n perusteella, joka edustaa elementin yksilöllistä tunnistetta. Yksilöllisyydellä tarkoitetaan, että jos sivullamme on jo elementti, jolla on tämä id, toista elementtiä samalla id:llä ei pitäisi olla.

Yksilöllinen tunniste asetetaan käyttämällä id-attribuuttia, johon kirjoitetaan keksimämme nimi. Tehdään esimerkiksi kaksi lohkoa. Annetaan ensimmäiselle id-arvoksi block1 ja toiselle - arvoksi block2:

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

Jos haluat viitata elementtiin, jolla on annettu id, sinun on kirjoitettava merkki # ja keksimämme nimi, näin:

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

id-attribuuttia käytetään silloin, kun on tarpeen korostaa elementin yksilöllisyyttä. Luokkia käytetään silloin, kun oletetaan, että tällaisia elementtejä voi olla monta, vaikka niitä on nyt vain yksi.

Задание 1

Annettu seuraava koodi:

html<div id="elem1">
  <h2>Otsikko</h2>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>
<div id="elem2">
  <h2>Otsikko</h2>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>
<div id="elem3">
  <h2>Otsikko</h2>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>

Värjää lohkon elem1 sisältö punaiseksi, lohkon elem2 - vihreäksi, ja lohkon elem3 - sinivaaleaksi.