Välja element efter unikt id i CSS

Som du redan vet är klasser avsedda att tilldelas en grupp element. Förutom klasser kan man också välja element efter id, som representerar en unik identifierare för elementet. Med unikhet menas att om vi redan har ett element med ett sådant id på sidan, så ska det inte finnas ett annat element med samma id.

En unik identifierare anges med hjälp av attributet id, där vi skriver ett namn vi hittat på. Låt oss till exempel skapa två block. Ge den första ett id med värdet block1, och den andra - med värdet block2:

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

För att rikta in dig på ett element med ett specifikt id, behöver du skriva symbolen # och namnet vi hittat på, så här:

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

Attributet id används i det fall där det är nödvändigt att betona elementets unikhet. Klasser används när det är förväntat att det kan finnas många sådana element, även om det för närvarande bara finns ett.

Följande kod ges:

<div id="elem1">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem2">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem3">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Färga innehållet i blocket elem1 i rött, blocket elem2 - i grönt, och blocket elem3 - i blått.