Sách tham khảo pseudo-class CSS

CSS 伪类

Pseudo-class được sử dụng để định nghĩa trạng thái đặc biệt của yếu tố.

Ví dụ, nó có thể được sử dụng để:

  • Đặt phong cách khi người dùng đặt con trỏ chuột trên yếu tố.
  • Đặt phong cách khác nhau cho các liên kết đã truy cập và chưa truy cập.
  • Đặt phong cách khi yếu tố nhận được sự tập trung.
  • Đặt phong cách cho các yếu tố biểu mẫu hợp lệ/ vô hiệu/ bắt buộc/ tùy chọn.

Bảng sau hiển thị các pseudo-class khác nhau trong CSS:

伪类 Ví dụ Mô tả ví dụ
:active a:active Chọn liên kết hoạt động.
:any-link a:anylink Chọn tất cả các yếu tố <a> hoặc <area> có thuộc tính href.
:auto-fill input:autofill Chọn tất cả các yếu tố <input> được tự động điền giá trị bởi trình duyệt.
:checked option:checked Khớp với tất cả các yếu tố <input> hoặc <option> được chọn.
:default input:default Chọn yếu tố biểu mẫu mặc định trong một nhóm yếu tố liên quan.
:defined :defined Chọn tất cả các yếu tố đã được định nghĩa (yếu tố tiêu chuẩn hoặc tùy chỉnh).
:dir() :dir(rtl) Chọn tất cả các yếu tố có hướng văn bản chỉ định.
:disabled option:disabled Chọn tất cả các yếu tố bị vô hiệu hóa, thường được sử dụng cho các yếu tố biểu mẫu.
:empty div:empty Chọn tất cả các yếu tố không có yếu tố con (bao gồm các nút văn bản).
:enabled input:enabled Chọn tất cả các phần tử được kích hoạt, thường được sử dụng cho các phần tử biểu mẫu.
:first @page :first Chỉ trang đầu tiên của tài liệu in (được sử dụng cùng với @page rule).
:first-child p:first-child Chọn phần tử là con đầu tiên của phần tử cha (trong nhóm anh em).
:first-of-type li:first-of-type Chọn phần tử đầu tiên trong nhóm anh em có loại đặc biệt.
:focus select:focus Chọn phần tử được tập trung, thường được sử dụng cho các phần tử biểu mẫu.
:focus-visible button:focus-visible Chọn phần tử được tập trung (chỉ áp dụng phong cách tập trung khi sử dụng phím而非 con trỏ chuột).
:focus-within form:focus-within Khớp phần tử hoặc bất kỳ phần tử con nào của nó khi được tập trung.
:fullscreen :fullscreen Chọn phần tử đang trong chế độ toàn màn hình.
:has() h2:has(+p) Chọn phần tử <h2> sau phần tử <p> và áp dụng phong cách cho <h2>.
:hover a:hover Chọn phần tử khi con trỏ chuột đang ở trên.
:in-range input:in-range Chọn phần tử <input> có giá trị trong khoảng đã chỉ định.
:indeterminate input:indeterminate Chọn các phần tử biểu mẫu trong trạng thái không chắc chắn.
:invalid input:invalid Chọn các phần tử biểu mẫu không hợp lệ.
:is() :is(ul, ol) Chọn tất cả các phần tử <ul> và <ol>.
:lang() p:lang(it) Chọn phần tử <p> có thuộc tính lang là "it" (tiếng Ý).
:last-child li:last-child Chọn phần tử <li> là con cuối cùng của phần tử cha.
:last-of-type p:last-of-type Chọn phần tử <p> là phần tử <p> cuối cùng của phần tử cha.
:left @page :left Chỉ các trang bên trái của tài liệu in (được sử dụng cùng với @page rule).
:link a:link Chọn tất cả các liên kết chưa được truy cập.
:modal :modal Chọn các phần tử trong trạng thái mô đun.
:not() :not(p) Chọn tất cả các phần tử không phải là phần tử <p>.
:nth-child() p:nth-child(2) Chọn phần tử <p> là con thứ hai của phần tử cha.
:nth-last-child() p:nth-last-child(2) Chọn phần tử <p> là phần tử con thứ hai cuối cùng của phần tử cha.
:nth-last-of-type() p:nth-last-of-type(2) Chọn phần tử <p> là phần tử <p> thứ hai cuối cùng của phần tử cha.
:nth-of-type() p:nth-of-type(2) Chọn phần tử <p> là phần tử <p> thứ hai của phần tử cha.
:only-child p:only-child Chọn phần tử <p> là phần tử con duy nhất của phần tử cha.
:only-of-type p:only-of-type Chọn phần tử <p> là phần tử <p> duy nhất của phần tử cha.
:optional textarea:optional Chọn các phần tử <input>, <select> hoặc <textarea> không có thuộc tính required.
:out-of-range input:out-of-range Chọn phần tử <input> có giá trị vượt quá phạm vi được chỉ định.
:placeholder-shown input:placeholder-shown Chọn phần tử <input> hoặc <textarea> hiện đang hiển thị văn bản chèn.
:popover-open :popover-open Chọn phần tử đang ở trạng thái hiển thị弹出.
:read-only input:read-only Chọn các phần tử đầu vào có thuộc tính readonly.
:read-write input:read-write Chọn các phần tử đầu vào có thể chỉnh sửa.
:required input:required Chọn các phần tử đầu vào có thuộc tính required.
:right @page :right Đại diện cho tất cả các trang phải in của tài liệu (kết hợp với quy tắc @page).
:root :root Chọn phần tử gốc của tài liệu.
:scope :scope Chọn phần tử là điểm tham chiếu hoặc phạm vi của bộ lọc chọn.
:state() :state() Chọn phần tử tùy chỉnh có trạng thái tùy chỉnh được chỉ định.
:target :target Chọn phần tử mục tiêu hoạt động hiện tại.
:user-invalid :user-invalid Chọn các phần tử biểu mẫu có giá trị không hợp lệ (sau khi người dùng tương tác).
:user-valid :user-valid Chọn các phần tử biểu mẫu có giá trị hợp lệ (sau khi người dùng tương tác).
:valid input:valid Chọn tất cả các phần tử đầu vào có giá trị hợp lệ.
:visited a:visited Chọn tất cả các liên kết đã được truy cập.
:where() :where(ol, ul) Chọn tất cả các phần tử <ul> và <ol>.