Bộ chọn anh em tổng quát

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 5 trên 43.

Bộ chọn anh em tổng quát (~) chọn tất cả phần tử là anh em của một phần tử được chỉ định và nằm sau phần tử đó.

Ví dụ:

<div>
  <p>Paragraph 1</p>
  <h2>Heading</h2>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

Với CSS này:

h2 ~ p {
  color: blue;
}

Sau khi áp dụng CSS này, kết quả sẽ là:

Đoạn văn 1 vẫn giữ nguyên (nó không phải là phần tử cùng cấp nằm sau h2)

Đoạn văn 2 chuyển thành màu xanh dương (nó là phần tử cùng cấp nằm sau h2)
Đoạn văn 3 chuyển thành màu xanh dương (nó là phần tử cùng cấp nằm sau h2)

Thử thách

Dễ

Tạo một quy tắc CSS dùng bộ chọn anh em tổng quát để làm sáng tất cả phần tử <p> nằm sau <h1> bằng màu hồng rực (#ff69b4).

Tự làm thử

<html>
<head>
    <title>General Sibling Selector</title>
    <style>
        /* CSS solution goes here */

    </style>
</head>
<body>
    <h1>Welcome to the Party!</h1>
    <p>Grab a drink.</p>
    <p>Say hello to new friends.</p>
    <div>Dance floor area</div>
    <p>Take a selfie!</p>
    <p>Enjoy the snacks.</p>
</body>
</html>