ელემენტის არჩევა უნიკალური id-ით CSS-ში

როგორც უკვე იცით, კლასები განკუთვნილია, რომ მივანიჭოთ ისინი ელემენტების ჯგუფს. კლასების გარდა, ასევე შესაძლებელია ელემენტების არჩევა id-ის მიხედვით, რომელიც წარმოადგენს ელემენტის უნიკალურ იდენტიფიკატორს. უნიკალურობა ნიშნავს იმას, რომ თუ გვერდზე უკვე არის ელემენტი ასეთი id-ით, მაშინ სხვა ელემენტი იგივე id-ით არ უნდა იყოს.

უნიკალური იდენტიფიკატორი იწერება ატრიბუტ id-ში, რომელშიც იწერება ჩვენ მიერ გამოგონილი სახელი. მაგალითად, შევქმნათ ორი ბლოკი. პირველს მივანიჭოთ id მნიშვნელობით block1, ხოლო მეორეს - მნიშვნელობით block2:

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

ელემენტზე მითითება მინიჭებული id-ით საჭიროებს სიმბოლო #-ის დაწერას და ჩვენ მიერ გამოგონილ სახელს, ასე:

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

ატრიბუტი id გამოიყენება იმ შემთხვევაში, როდესაც საჭიროა ელემენტის უნიკალურობის ხაზგასმა. კლასები გამოიყენება მაშინ, როდესაც შესაძლებელია, რომ ასეთი ელემენტები რამდენიმე იყოს, მაშინაც კი, თუ ახლა მხოლოდ ერთია.

მოცემულია შემდეგი კოდი:

<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 შიგთავსი წითელ ფერში, ბლოკის elem2 - მწვანე ფერში, ხოლო ბლოკის elem3 - ცისფერ ფერში.