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:

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

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

Aşakdaky kod berlen:

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