Chọn mọi <ul> đứng sau <p> với CSS (General Sibling Selector ~)

Bộ chọn anh em chung (General Sibling Selector: ~)

Bộ chọn element ~ element chọn **tất cả** phần tử thứ hai là **anh em (siblings)** của phần tử thứ nhất, **xuất hiện sau nó** (không cần ngay lập tức). Khác với `+` (chỉ ngay sau).

Cú pháp

former ~ latter {
  /* Style cho TẤT CẢ latter sau former, cùng cấp */
}

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    p ~ ul {
      color: white;
      background-color: blue;
    }
  </style>
</head>
<body>
  <h1>Demo Website</h1>
  <h2>Fruits</h2>
  <div>
    <p>Vegetables are good for health.</p>
    <ul>          <!-- Sibling của p, CÙNG CẤP trong div -->
      <li>Spinach</li>
      <li>Onion</li>
      <li>Capsicum</li>
    </ul>
  </div>
  <p>Fruits are good for health.</p>
  <ul>            <!-- Sibling của p thứ 2, CÙNG CẤP body -->
    <li>Apple</li>
    <li>Orange</li>
    <li>Kiwi</li>
  </ul>
</body>
</html>

Giải thích kết quả

• Được chọn (xanh nền): CẢ 2 `
  ` - cả hai đều là sibling của một `

  ` và xuất hiện sau nó.

  • Đặc biệt: `
    ` đầu tiên nằm trong `
    ` nhưng vẫn là sibling của `
    ` đầu tiên (cùng cha `
    `).

    So sánh 4 Combinators

    Selector	Tên	Chọn	Ví dụ khớp
    A B	Descendant	Tất cả B trong A (mọi cấp)	`div p` chọn p trong div, section, span...
    A > B	Child	B con trực tiếp của A	`div > p` chỉ p con ngay div
    A + B	Adjacent Sibling	B ngay sau A (1 phần tử)	`h2 + p` chỉ p đầu tiên sau h2
    A ~ B	General Sibling	Tất cả B sau A (cùng cấp)	`h2 ~ p` chọn TẤT CẢ p sau h2

    Ứng dụng thực tế

    • Form validation: `input:invalid ~ .error-message { display: block; }`
    • Accordion/Collapse: `input:checked ~ .content { max-height: 500px; }`
    • Striped table rows: `tr:nth-child(odd) ~ tr { background: #f5f5f5; }` (ít dùng).
    • Tab panels: `.tab:checked ~ .panel { display: block; }`

    Lưu ý

    Chỉ hoạt động với **siblings** (cùng parent). Không chọn con, cháu, hay element ở cấp cha khác.