`:is()` và `:where()` viết giống hệt nhau thì khác gì? Khi nào bắt buộc chọn `:where()`?

Hai hàm nhóm selector này giống nhau hoàn toàn về phần khớp, chỉ khác specificity:

• :is(...) nhận specificity của selector có độ cụ thể cao nhất trong danh sách.
• :where(...) luôn có specificity bằng 0, bất kể bên trong là gì.

:is(#main, .post) h2 { color: red; }   /* (1,0,1) — vì có #main */
:where(#main, .post) h2 { color: blue; } /* (0,0,1) — chỉ tính h2 */

Hệ quả thực tế: rule dùng :is() với một #id lẫn trong danh sách bỗng khó đè, còn :where() cho ra rule dễ override bằng bất kỳ class nào.

Chọn :where() khi:

• Viết reset / base style hoặc CSS của thư viện dùng chung — người dùng phải đè được mà không cần đấu specificity. Các modern CSS reset đều bọc selector trong :where() vì lý do này.
• Viết selector phòng thủ kiểu .card :where(h1, h2, h3) để style mặc định không khoá cứng.

Chọn :is() khi muốn gom nhóm cho gọn mà vẫn giữ trọng số bình thường, vd :is(.btn, .link):hover.

Hai hàm còn dùng để rút gọn selector list dài, và cả hai đều forgiving: một selector sai cú pháp bên trong không làm hỏng cả rule — khác selector list truyền thống ngăn cách bằng dấu phẩy.