CSS'te benzersiz id'ye göre öğe seçme

Bildiğiniz gibi, sınıflar bir grup öğeye atanmak için tasarlanmıştır. Sınıflara ek olarak, öğeleri benzersiz bir öğe tanımlayıcısı olan id'ye göre de seçebilirsiniz. Benzersizlik, sayfamızda zaten bu id'ye sahip bir öğe varsa, aynı id'ye sahip başka bir öğenin olmaması gerektiği anlamına gelir.

Benzersiz tanımlayıcı, içine bizim tarafımızdan uydurulan bir ismin yazıldığı id özniteliği kullanılarak belirlenir. Örneğin, iki blok yapalım. Birincisine id değeri olarak block1, ikincisine ise block2 değerini atayalım:

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

Belirli bir id'ye sahip öğeye başvurmak için, # sembolünü ve bizim uydurduğumuz ismi şu şekilde yazmanız gerekir:

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

id özniteliği, bir öğenin benzersizliğini vurgulamak gerektiğinde kullanılır. Sınıflar ise, şu an tek olsa bile, bu türden birçok öğe olabileceği varsayıldığında kullanılır.

Aşağıdaki kod verilmiştir:

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

elem1 bloğunun içeriğini kırmızı, elem2 bloğunun içeriğini yeşil ve elem3 bloğunun içeriğini mavi renge boyayın.