Chọn phần anh em CSS

Chọn器 anh em cạnh nhau (Adjacent sibling selector) có thể chọn phần tử xuất hiện ngay sau một phần tử khác, và cả hai có cùng một phần tử cha.

Chọn anh em cạnh nhau

Nếu cần chọn phần tử xuất hiện ngay sau một phần tử khác, và cả hai có cùng một phần tử cha, có thể sử dụng chọn器 anh em cạnh nhau (Adjacent sibling selector).

Ví dụ, nếu muốn tăng khoảng cách trên cùng của đoạn văn xuất hiện ngay sau phần tử h1, có thể viết như sau:

h1 + p {margin-top:50px;}

Chọn器 này đọc như sau: “Chọn đoạn văn xuất hiện ngay sau phần tử h1, phần tử h1 và p có cùng một phần tử cha”.

Thử ngay

Giải thích ngữ pháp

Chọn anh em cạnh nhau sử dụng dấu cộng (+), tức dấu kết hợp anh em cạnh nhau (Adjacent sibling combinator).

Ghi chú:Ngưòi dùng dấu kết hợp con, dấu kết hợp anh em bên cạnh có thể có khoảng trống.

Xin xem đoạn đoạn cây tài liệu sau đây:

<div>
  <ul>
    <li>Danh sách mục 1</li>
    <li>Danh sách mục 2</li>
    <li>Danh sách mục 3</li>
  </ul>
  <ol>
    <li>Danh sách mục 1</li>
    <li>Danh sách mục 2</li>
    <li>Danh sách mục 3</li>
  </ol>
</div>

Trong đoạn mã trên, phần div chứa hai danh sách: một danh sách không có dấu và một danh sách có dấu, mỗi danh sách chứa ba mục liệt kê. Cả hai danh sách này là anh em, mục liệt kê trong chúng cũng là anh em. Tuy nhiên, mục liệt kê trong danh sách đầu tiên không phải là anh em với mục liệt kê trong danh sách thứ hai vì hai nhóm mục liệt kê này không thuộc cùng một phần cha (chỉ có thể tính là anh em họ).

Hãy nhớ rằng, chỉ có thể chọn phần thứ hai trong hai phần anh em bằng một ký hiệu kết hợp. Xem chọn phần dưới đây:

li + li {font-weight:bold;}

Chọn phần này chỉ sẽ làm cho mục liệt kê thứ hai và thứ ba trong danh sách trở nên đậm. Mục liệt kê đầu tiên không bị ảnh hưởng.

Thử ngay

Kết hợp với các chọn phần khác

Ký hiệu anh em còn có thể kết hợp với các ký hiệu khác:

html > body table + ul {margin-top:20px;}

Chọn phần này được giải thích là: chọn tất cả các phần ul tiếp theo xuất hiện sau phần table, phần table này nằm trong phần body, phần body là phần con của phần html.