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:

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

#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.

Annettu seuraava koodi:

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