Bộ chọn phần tử anh em liền kề

Bài học 9 trên 15 trong khóa học Bộ chọn CSS của Coddy.

Hãy cùng tìm hiểu về bộ chọn anh em liền kề. Các bộ chọn này nhắm đến những phần tử có cùng phần tử cha và nằm ngay sau phần tử được chọn. Bộ chọn anh em liền kề là một bộ chọn CSS chọn tất cả phần tử là anh em của một phần tử được chỉ định và nằm ngay cạnh phần tử đó. Bộ chọn anh em liền kề được biểu thị bằng dấu cộng (+) giữa hai bộ chọn.

Cú pháp

former_element + target_element {
  /* các thuộc tính kiểu dáng */
}

Giả sử ta có cấu trúc HTML sau:

<div class="container">
   <p>First paragraph</p>
   <span>Adjacent span</span>
   <p>Second paragraph</p>
</div>

Để định kiểu cho <span> nằm ngay sau một đoạn văn, bạn sẽ dùng bộ chọn anh em liền kề:

p + span {
   font-weight: bold;
}

Trong trường hợp này, “Adjacent span” sẽ có kiểu chữ đậm.

Thử thách

Dễ

Tạo một trang web có phần tử p và phần tử span.
Dùng bộ chọn anh em liền kề để tạo viền đỏ cho phần tử span nằm ngay sau phần tử p.

Tự làm thử

<html>
<head>
    <title>Adjacent Sibling Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
    
</body>
</html>

Tất cả bài học trong Bộ chọn CSS

1Giới thiệu về CSS Selectors

Mục đích của CSS Selectors Vì sao chúng quan trọng?

4Bộ chọn thuộc tính

Giới thiệu về bộ chọn thuộc tính Sự hiện diện và giá trị chính xác Bộ chọn giá trị thuộc tính Bộ chọn giá trị thuộc tính II Bộ chọn giá trị thuộc tính III

2Bộ chọn đơn giản

Bộ chọn kiểu Bộ chọn lớp Bộ chọn ID Bộ chọn phổ quát

3Bộ chọn kết hợp

Bộ chọn phần tử con Bộ chọn phần tử hậu duệBộ chọn phần tử anh em liền kềBộ chọn phần tử anh em tổng quát

Tự luyện tập: Playground Web