Chọn tất cả phần tử <p> ngay sau <div> với CSS (Adjacent Sibling Selector)

Bộ chọn anh em liền kề (Adjacent Sibling Selector: +)

Bộ chọn element + element chọn phần tử thứ hai **chỉ khi nó nằm ngay sau** phần tử thứ nhất và **cùng cấp (siblings)**. Đây là một trong các bộ chọn kết hợp (combinators) mạnh mẽ của CSS.

Cú pháp

element1 + element2 {
  /* Style cho element2 khi nó ngay sau element1 */
}

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    div + p {
      color: white;
      background-color: blue;
    }
  </style>
</head>
<body>
  <h1>Demo Website</h1>
  <h2>Fruits</h2>
  <div>
    <p>This is demo text.</p> <!-- Con của div, KHÔNG phải sibling -->
  </div>
  <p>Fruits are good for health.</p> <!-- Sibling ngay sau div -->
  <p>Fruits makes you healthy.</p> <!-- Sibling thứ 2, không ngay sau div -->
</body>
</html>

Giải thích kết quả

• Được chọn: `

  Fruits are good for health.

  ` - nó là sibling ngay sau `<div>`.
• KHÔNG được chọn: `

  This is demo text.

  ` (con của div), `

  Fruits makes you healthy.

  ` (không ngay sau div).

So sánh các bộ chọn anh em