CSSCả ba nhận danh sách selector, khác nhau ở cách tính specificity.
css
/* dài dòng */
.article h1, .article h2, .article h3 { margin-block: 1em; }
/* :is() — gọn, specificity = selector MẠNH NHẤT bên trong */
.article :is(h1, h2, h3) { margin-block: 1em; }
/* :where() — gọn, specificity LUÔN = 0 */
:where(.article) :where(h1, h2, h3) { margin-block: 1em; }
/* :not() — loại trừ */
li:not(:last-child) { border-bottom: 1px solid var(--border); }| Specificity | Dùng khi | |
|---|---|---|
:is(a, #b) | lấy của #b → (1,0,0) | gộp selector trong code của mình |
:where(a, #b) | luôn (0,0,0) | viết base style / reset để dễ ghi đè |
:not(a, #b) | lấy của #b | loại trừ |
Ví dụ rõ nhất về :where() — reset dễ ghi đè bằng một class thường:
css
:where(button) { border: 0; background: none; }
.btn { border: 1px solid var(--border); } /* thắng, vì :where = 0 */Lưu ý: đừng dùng :is() trong file reset. Chỉ cần một #id lọt vào danh sách là cả quy tắc lên specificity (1,0,0) và không class nào ghi đè nổi — đó chính là lý do :where() tồn tại.
Ghi chú: :not() nhận nhiều selector (:not(.a, .b)) từ CSS Selectors Level 4; trước đó chỉ nhận một.