1. :not() – loại trừ phần tử

Dùng để chọn mọi phần tử trừ phần tử cụ thể, rất hữu ích để viết style ngắn gọn.

li:not(:last-child) {
  margin-bottom: 12px;
}

2. :nth-child(an+b) – chọn theo vị trí

Có thể chọn phần tử thứ n hoặc theo quy luật (ví dụ: số chẵn, lẻ…)

li:nth-child(odd) {
  background: #f7f7f7;
}
li:nth-child(3n) {
  font-weight: bold;
}

3. :is() – rút gọn selector phức tạp

Kết hợp nhiều selector khác nhau một cách gọn gàng.

:is(h1, h2, h3, h4) {
  color: #333;
}

4. :has() – chọn phần tử cha chứa phần tử con (CSS4)

Cho phép style phần tử cha nếu chứa phần tử con thỏa điều kiện. (Chỉ hỗ trợ trên trình duyệt hiện đại như Chrome, Safari…)

article:has(img) {
  border-left: 4px solid #42b983;
}

5. :where() – tương tự :is() nhưng không ảnh hưởng độ ưu tiên

:where(h1, h2, h3) {
  margin-bottom: 0.5em;
}

6. :empty – chọn phần tử không có nội dung

p:empty {
  display: none;
}

7. :checked – cực hữu dụng với checkbox toggle UI

input[type="checkbox"]:checked + .menu {
  display: block;
}

8. :target – tạo modal, tab, popup đơn giản

Dùng trong các hệ thống có đường dẫn dạng #id, ví dụ như tab hoặc lightbox thuần CSS.

#popup:target {
  opacity: 1;
  visibility: visible;
}

9. :focus-visible – cải thiện UX cho bàn phím

Chỉ hiển thị border focus khi dùng bàn phím, không hiển thị khi click chuột (giảm rối mắt).

button:focus-visible {
  outline: 2px solid #2196f3;
}

10. :nth-of-type() – chọn phần tử theo kiểu, không theo thứ tự toàn bộ

p:nth-of-type(2) {
  color: red;
}

Tổng kết

Các pseudo-class nâng cao giúp viết CSS trở nên mạnh mẽ, có điều kiện, và gần như “lập trình” được logic giao diện mà không cần đến JavaScript. Nếu bạn đang muốn tối ưu hiệu suất và sự tinh gọn cho CSS hiện đại, đừng bỏ qua những công cụ này.