Sử dụng id trong CSS

Khi sử dụng id, tất cả các thao tác với bộ chọn mà chúng ta đã học trong các bài trước đều có thể áp dụng.

Ví dụ

Giả sử chúng ta có đoạn mã sau:

<div id="block">
	<h2>Title</h2>
	<p>text</p>
	<p>text</p>
</div>

Hãy chọn h2 từ phần tử có id bằng block, và tô màu đỏ cho nó:

#block h2 {
	color: red;
}

Bây giờ hãy chọn p từ phần tử có id bằng block, và tô màu xanh lá cây cho nó:

#block p {
	color: green;
}

Ví dụ

Bây giờ giả sử chúng ta có đoạn mã sau:

<div id="block">
	<h2 class="header">Title</h2>
	<p>text</p>
	<p>text</p>
	
	<h3 class="header">Title</h3>
	<p>text</p>
	<p>text</p>
</div>

Hãy chọn các phần tử có lớp header, nằm bên trong phần tử có id bằng block, và tô màu đỏ cho chúng:

#block .header {
	color: red;
}

Bây giờ hãy chọn các tiêu đề h2 có lớp header, nằm bên trong phần tử có id bằng block, và tô màu đỏ cho chúng:

#block h2.header {
	color: red;
}

Bài tập thực hành

Viết bộ chọn chọn tất cả các h2, nằm trong phần tử có id bằng elem. Kiểm tra bộ chọn của bạn trên đoạn mã sau:

<div id="elem">
	<h2>Choose</h2>
	<p>---</p>
	
	<h2>Choose</h2>
	<p>---</p>
</div>

<h2>Do not +++</h2>
<p>---</p>

Viết bộ chọn chọn tất cả các phần tử có lớp text, nằm trong phần tử có id bằng elem. Kiểm tra bộ chọn của bạn trên đoạn mã sau:

<div id="elem">
	<p class="text">+++</p>
	<p class="text">+++</p>
	
	<ul>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>

Viết bộ chọn chọn tất cả các đoạn văn có lớp text, nằm trong phần tử có id bằng elem. Kiểm tra bộ chọn của bạn trên đoạn mã sau:

<div id="elem">
	<p class="text">+++</p>
	<p class="text">+++</p>
	
	<ul>
		<li class="text">---</li>
		<li class="text">---</li>
		<li class="text">---</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>

Viết bộ chọn chọn tất cả các li có lớp text, nằm trong phần tử có id bằng elem. Kiểm tra bộ chọn của bạn trên đoạn mã sau:

<div id="elem">
	<p class="text">---</p>
	<p class="text">---</p>
	
	<ul>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>