Lựa chọn phần tử theo id duy nhất trong CSS

Như bạn đã biết, lớp (class) được dùng để gán cho một nhóm phần tử. Ngoài lớp ra, chúng ta cũng có thể chọn phần tử theo id, đại diện cho một định danh duy nhất của phần tử. Tính duy nhất ở đây được hiểu là nếu trên trang đã có một phần tử với id đó rồi, thì không được có phần tử nào khác có cùng id như vậy.

Định danh duy nhất được đặt bằng thuộc tính id, trong đó chúng ta viết tên do mình đặt ra. Ví dụ, hãy tạo hai khối. Đặt id cho khối thứ nhất với giá trị block1, và cho khối thứ hai - với giá trị block2:

<div id="block1">
	<p>văn bản</p>
	<p>văn bản</p>
</div>
<div id="block2">
	<p>văn bản</p>
	<p>văn bản</p>
</div>

Để truy cập vào phần tử với id đã cho, cần viết ký tự # và tên do chúng ta đặt, như thế này:

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

Thuộc tính id được dùng trong trường hợp cần nhấn mạnh tính duy nhất của phần tử. Lớp (class) được dùng khi giả định rằng có thể có nhiều phần tử như vậy, ngay cả khi hiện tại nó chỉ có một.

Cho đoạn code sau:

<div id="elem1">
	<h2>Tiêu đề</h2>
	<p>
		văn bản
	</p>
	<p>
		văn bản
	</p>
</div>
<div id="elem2">
	<h2>Tiêu đề</h2>
	<p>
		văn bản
	</p>
	<p>
		văn bản
	</p>
</div>
<div id="elem3">
	<h2>Tiêu đề</h2>
	<p>
		văn bản
	</p>
	<p>
		văn bản
	</p>
</div>

Hãy tô màu nội dung của khối elem1 thành màu đỏ, khối elem2 - thành màu xanh lá, và khối elem3 - thành màu xanh lam.