Một pseudo-class (một dấu hai chấm :) chọn các phần tử dựa trên trạng thái hoặc vị trí của chúng — thứ không thể diễn đạt bằng một class thông thường, như "khi đang hover" hoặc "phần tử con đầu tiên."
{ : blue; }
{ : solid; }
{ : (); }
{ : ; }
{ }
{ }
Thứ tự cho link rất quan trọng (LVHA): :link, :visited, :hover, :active.
li:first-child { } /* li đầu tiên trong các anh em của nó */
li:last-child { } /* li cuối cùng */
li:nth-child(2) { } /* li thứ 2 */
li:nth-child(odd) { } /* thứ 1, 3, 5... — zebra striping */
li:nth-child(3n) { } /* mỗi li thứ 3 */
p:only-child { } /* p là con duy nhất */
:nth-child() rất mạnh — 2n (chẵn), 2n+1 (lẻ), 3n (mỗi thứ ba), v.v.
input:required { }
input:invalid { border-color: red; }
:is(h1, h2, h3) { } /* khớp bất kỳ — rút gọn danh sách selector */
.card:has(img) { } /* "parent selector": một card CHỨA một img */
:not(.active) { } /* mọi thứ trừ .active */
Pseudo-class dùng một dấu hai chấm (:hover, một trạng thái); pseudo-element dùng hai (::before, một phần được tạo ra). Đừng nhầm lẫn chúng.
Pseudo-class cho phép bạn tạo style cho tương tác (hover/focus — thiết yếu cho UI dễ dùng và accessible) và cấu trúc (zebra striping, đầu/cuối) mà không cần thêm markup hay JavaScript.
Các loại hiện đại (:has, :is, :focus-visible) giải quyết những vấn đề trước kia cần JS hoặc các selector lặp lại.