Elem kiválasztása egyedi id alapján CSS-ben

Ahogy azt már tudod, az osztályok arra szolgálnak, hogy egy elemcsoporthoz rendeljük őket. Az osztályok mellett az elemeket a id alapján is kiválaszthatjuk, ami az elem egyedi azonosítója. Az egyediség alatt azt értjük, hogy ha már van egy elem ezzel a id-vel az oldalon, akkor nem lehet egy másik elem ugyanazzal a id-vel.

Az egyedi azonosítót a id attribútum segítségével adjuk meg, amibe a mi általunk kitalált nevet írjuk. Tegyük fel például, hogy készítünk két blokkot. Az elsőnek adjuk meg a id értékét block1-ként, a másodiknak pedig block2-ként:

<div id="block1">
	<p>szöveg</p>
	<p>szöveg</p>
</div>
<div id="block2">
	<p>szöveg</p>
	<p>szöveg</p>
</div>

Ahhoz, hogy a megadott id-vel rendelkező elemhez férjünk hozzá, a # szimbólumot kell írnunk, majd a mi általunk kitalált nevet, így:

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

A id attribútumot abban az esetben használjuk, amikor hangsúlyozni kell az elem egyediségét. Az osztályokat akkor használjuk, amikor az feltételezhető, hogy sok ilyen elem lehet, még akkor is, ha jelenleg csak egy van.

Adott a következő kód:

<div id="elem1">
	<h2>Cím</h2>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>
<div id="elem2">
	<h2>Cím</h2>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>
<div id="elem3">
	<h2>Cím</h2>
	<p>
		szöveg
	</p>
	<p>
		szöveg
	</p>
</div>

Színezd az elem1 blokk tartalmát pirosra, az elem2 blokkot - zöldre, az elem3 blokkot pedig - kékre.