The Sibling Selector

Chúng ta chỉ nhìn cách selector con và cháu có thể được dùng nhưng với các thành phần anh/chị thì sao. CSS có một nhóm các seletor như vậy và trong chương này chúng ta sẽ cùng tìm hiểu.

Với selector CSS anh chị thì cú pháp là seletor và theo sau la dấu ~, sau đó là selector bạn muốn hướng tới, bạn có thể hướng tới các thành phần bằng cách liệt kê thành phần khác có cùng cha. Một yêu cầu khác là phần đầu tiên của selector cần phải có trong trang TRƯỚC thành phần đích, thậm chí chúng cùng là con của cùng cha. Đây là ví dụ minh họa:

<style type="text/css">
h2 ~ p {
	font-style: italic;
}
</style>

<div id="content">
	<h1>Hello, world!</h1>
	<p>Some text here</p>
	<h2>Hello, world!</h2>
	<p>Some text here</p>
	<p>More text here</p>
</div>

Vậy, toàn bộ thành phần text là con của cùng một thành phần div. Chúng ta xác định rằng thành phần p là anh chị của thành phần h2 phải có dạng nghiêng. Bạn có thể thấy nếu bạn thử ví dụ thì có nghĩa rằng hai đoạn cuối chuyển sang chữ nghiêng nhưng không phải đoạn đầu tiên, vì nó đứng trước thành phần h2 trong văn bản. Bạn cũng sẽ để ý rằng selector anh chị không ảnh hưởng tới con cháu:

<style type="text/css">
h2 ~ p {
	font-style: italic;
}
</style>

<div id="content">
	<h1>Hello, world!</h1>
	<p>Some text here</p>
	<h2>Hello, world!</h2>
	<p>Some text here</p>
	<div>
		<p>More text here</p>
	</div>
</div>

Chú ý cách mà đoạn trong thẻ div thứ hai không bị ảnh hưởng vì nó không liên quan trực tiếp tới thành phần h2.

Summary

Selector anh chị cho phép bạn hướng tới thành phần dựa trên thành phần khác có cùng cha. Tuy nhiên, bạn nên chú ý rằng nó có nhiều thành phần, dựa vào việc có bao nhiêu thành phần mà thành phần cha chứa bên trong. Dùng selector anh chị bên cạnh, chúng ta sẽ bàn ở chương tiếp theo, bạn có thể giới hạn các thành phần chọn ra.