Vai trò bộ chọn :not(selector) trong CSS

Bộ chọn phủ định :not()

:not(selector) chọn tất cả phần tử **KHÔNG khớp** với selector bên trong ngoặc. Rất mạnh để loại trừ.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    p { color: red; }
    :not(p) { color: blue; }
  </style>
</head>
<body>
  <h1>Tiêu đề 1 - Xanh (không phải p)</h1>
  <h2>Tiêu đề 2 - Xanh</h2>
  <h3>Tiêu đề 3 - Xanh</h3>
  <p>Đoạn văn 1 - Đỏ</p>
  <p>Đoạn văn 2 - Đỏ</p>
</body>
</html>

Tất cả phần tử không phải p (h1, h2, h3...) thành chữ xanh. Các p thành chữ đỏ. Có thể lồng: :not(:first-child), :not(.class), :not(div > p).