Pseudo-classes
Pseudo-class trong CSS là một từ khóa được thêm vào bộ chọn, cho phép bạn chọn các phần tử dựa trên thông tin nằm ngoài cây tài liệu, chẳng hạn như trạng thái cụ thể của các phần tử được chọn. Ví dụ, pseudo-class :hover có thể được dùng để tạo kiểu cho một nút khi con trỏ của người dùng di chuột qua nó.
/* Any button over which the user's pointer is hovering */
button:hover {
color: blue;
}
Một pseudo-class bao gồm dấu hai chấm (:) theo sau là tên pseudo-class (ví dụ: :hover). Pseudo-class hàm cũng chứa một cặp dấu ngoặc đơn để xác định các đối số (ví dụ: :dir()). Phần tử mà một pseudo-class được gắn vào được định nghĩa là phần tử neo (ví dụ: button trong trường hợp button:hover).
Pseudo-class cho phép bạn áp dụng kiểu cho một phần tử không chỉ liên quan đến nội dung của cây tài liệu, mà còn liên quan đến các yếu tố bên ngoài như lịch sử duyệt web (:visited, chẳng hạn), trạng thái nội dung của nó (như :checked trên một số phần tử biểu mẫu), hoặc vị trí của chuột (như :hover, cho phép biết liệu chuột có đang ở trên phần tử hay không).
Note: Khác với pseudo-class, pseudo-element có thể được dùng để tạo kiểu cho một phần cụ thể của phần tử.
Pseudo-class nhận dạng phần tử
Các pseudo-class này liên quan đến danh tính cốt lõi của các phần tử.
Pseudo-class trạng thái hiển thị phần tử
Các pseudo-class này cho phép chọn phần tử dựa trên trạng thái hiển thị của chúng.
:open-
Khớp với phần tử có thể mở hoặc đóng, hiện đang ở trạng thái mở.
:popover-open-
Khớp với phần tử popover hiện đang trong trạng thái hiển thị.
:modal-
Khớp với phần tử đang ở trạng thái loại trừ mọi tương tác với các phần tử bên ngoài nó cho đến khi tương tác đó bị đóng.
:fullscreen-
Khớp với phần tử hiện đang ở chế độ toàn màn hình.
:picture-in-picture-
Khớp với phần tử hiện đang ở chế độ picture-in-picture.
Pseudo-class đầu vào
Các pseudo-class này liên quan đến các phần tử biểu mẫu và cho phép chọn phần tử dựa trên thuộc tính HTML và trạng thái của trường trước và sau khi tương tác.
:enabled-
Đại diện cho phần tử giao diện người dùng đang ở trạng thái bật.
:disabled-
Đại diện cho phần tử giao diện người dùng đang ở trạng thái tắt.
:read-only-
Đại diện cho bất kỳ phần tử nào không thể được người dùng thay đổi.
:read-write-
Đại diện cho bất kỳ phần tử nào có thể chỉnh sửa bởi người dùng.
:placeholder-shown-
Khớp với phần tử input đang hiển thị văn bản placeholder. Ví dụ: nó sẽ khớp với thuộc tính
placeholdertrong các phần tử<input>và<textarea>. :autofill-
Khớp khi một
<input>đã được trình duyệt tự động điền. :default-
Khớp với một hoặc nhiều phần tử UI là mặc định trong một tập hợp các phần tử.
:checked-
Khớp khi các phần tử như checkbox và radio button được bật.
:indeterminate-
Khớp với các phần tử UI khi chúng đang ở trạng thái không xác định.
:blank-
Khớp với phần tử nhập liệu của người dùng trống, chứa chuỗi rỗng hoặc đầu vào null khác.
:valid-
Khớp với phần tử có nội dung hợp lệ. Ví dụ: phần tử input có kiểu 'email' chứa địa chỉ email được định dạng hợp lệ hoặc giá trị rỗng nếu điều khiển không bắt buộc.
:invalid-
Khớp với phần tử có nội dung không hợp lệ. Ví dụ: phần tử input có kiểu 'email' với tên được nhập.
:in-range-
Áp dụng cho các phần tử có giới hạn phạm vi. Ví dụ: thanh trượt khi giá trị được chọn nằm trong phạm vi cho phép.
:out-of-range-
Áp dụng cho các phần tử có giới hạn phạm vi. Ví dụ: thanh trượt khi giá trị được chọn nằm ngoài phạm vi cho phép.
:required-
Khớp khi phần tử biểu mẫu là bắt buộc.
:optional-
Khớp khi phần tử biểu mẫu là tùy chọn.
:user-valid-
Đại diện cho phần tử có đầu vào đúng, nhưng chỉ khi người dùng đã tương tác với nó.
:user-invalid-
Đại diện cho phần tử có đầu vào không đúng, nhưng chỉ khi người dùng đã tương tác với nó.
Pseudo-class ngôn ngữ
Các pseudo-class này phản ánh ngôn ngữ tài liệu và cho phép chọn phần tử dựa trên ngôn ngữ hoặc hướng viết.
Pseudo-class vị trí
Các pseudo-class này liên quan đến các liên kết và các phần tử được nhắm đến trong tài liệu hiện tại.
:any-link-
Khớp với phần tử nếu phần tử đó sẽ khớp với
:linkhoặc:visited. :link-
Khớp với các liên kết chưa được truy cập.
:visited-
Khớp với các liên kết đã được truy cập.
:local-link-
Khớp với các liên kết có URL tuyệt đối giống với URL đích. Ví dụ: liên kết neo đến cùng một trang.
:target-
Khớp với phần tử là mục tiêu của URL tài liệu.
:scope-
Đại diện cho các phần tử là điểm tham chiếu để các bộ chọn khớp.
Note:
Một pseudo-class :target-within, để khớp với các phần tử là hoặc có phần tử con là mục tiêu của URL tài liệu, đã được định nghĩa nhưng bị xóa khỏi thông số kỹ thuật. Hãy dùng :has(:target) cho mục đích này.
Pseudo-class trạng thái tài nguyên
Các pseudo-class này áp dụng cho phương tiện có khả năng ở trạng thái được mô tả là đang phát, chẳng hạn như video.
:playing-
Đại diện cho phần tử có thể phát đang phát.
:paused-
Đại diện cho phần tử có thể phát đang tạm dừng.
:seeking-
Đại diện cho phần tử có thể phát đang tìm kiếm vị trí phát trong tài nguyên phương tiện.
:buffering-
Đại diện cho phần tử có thể phát đang phát nhưng tạm thời bị gián đoạn vì đang tải xuống tài nguyên phương tiện.
:stalled-
Đại diện cho phần tử có thể phát đang phát nhưng bị gián đoạn vì không thể tải xuống tài nguyên phương tiện.
:muted-
Đại diện cho phần tử tạo âm thanh đang bị tắt tiếng.
:volume-locked-
Đại diện cho phần tử tạo âm thanh có mức âm lượng bị khóa bởi trình duyệt.
Pseudo-class chiều thời gian
Các pseudo-class này áp dụng khi xem nội dung có thời gian, chẳng hạn như track phụ đề WebVTT.
Pseudo-class cấu trúc cây
Các pseudo-class này liên quan đến vị trí của phần tử trong cây tài liệu.
:root-
Đại diện cho phần tử là gốc của tài liệu. Trong HTML, thường là phần tử
<html>. :empty-
Đại diện cho phần tử không có con nào ngoài các ký tự khoảng trắng.
:nth-child()-
Sử dụng ký hiệu
An+Bđể chọn phần tử từ danh sách các phần tử anh em. :nth-last-child()-
Sử dụng ký hiệu
An+Bđể chọn phần tử từ danh sách các phần tử anh em, đếm ngược từ cuối danh sách. :first-child-
Khớp với phần tử là phần tử anh em đầu tiên.
:last-child-
Khớp với phần tử là phần tử anh em cuối cùng.
:only-child-
Khớp với phần tử không có anh em. Ví dụ: mục danh sách không có mục danh sách nào khác trong danh sách đó.
:heading()-
Sử dụng ký hiệu
An+Bđể chọn các phần tử tiêu đề (<h1>-<h6>). :nth-of-type()-
Sử dụng ký hiệu
An+Bđể chọn phần tử từ danh sách các phần tử anh em khớp với một kiểu nhất định từ danh sách phần tử anh em. :nth-last-of-type()-
Sử dụng ký hiệu
An+Bđể chọn phần tử từ danh sách các phần tử anh em khớp với một kiểu nhất định từ danh sách phần tử anh em, đếm ngược từ cuối danh sách. :first-of-type-
Khớp với phần tử là phần tử anh em đầu tiên và cũng khớp với bộ chọn kiểu nhất định.
:last-of-type-
Khớp với phần tử là phần tử anh em cuối cùng và cũng khớp với bộ chọn kiểu nhất định.
:only-of-type-
Khớp với phần tử không có anh em của kiểu bộ chọn được chọn.
Pseudo-class cấu trúc shadow
Các pseudo-class này liên quan đến shadow DOM.
:host-
Khớp với shadow host của cây shadow.
:host()-
Khớp với phần tử khớp với
:hostvà khớp với bất kỳ bộ chọn nào trong danh sách được cung cấp. :host-context()-
Chọn các phần tử bên ngoài cây shadow trong ngữ cảnh của shadow host.
:has-slotted-
Khớp với các phần tử slot đã được gán nội dung.
Pseudo-class hành động người dùng
Các pseudo-class này yêu cầu một số tương tác từ người dùng để áp dụng, chẳng hạn như giữ con trỏ chuột qua phần tử.
:hover-
Khớp khi người dùng chỉ định một mục bằng thiết bị trỏ, chẳng hạn như giữ con trỏ chuột qua mục.
:active-
Khớp khi một mục đang được kích hoạt bởi người dùng. Ví dụ: khi mục được nhấp vào.
:focus-
Khớp khi phần tử có focus.
:focus-visible-
Khớp khi phần tử có focus và tác nhân người dùng xác định rằng phần tử nên được focus một cách rõ ràng.
:focus-within-
Khớp với phần tử mà
:focusáp dụng, cộng với bất kỳ phần tử nào có phần tử con mà:focusáp dụng. :target-current-
Khớp với pseudo-element
::scroll-markercủa mộtscroll-marker-grouphiện đang được cuộn đến, nói cách khác là scroll marker đang hoạt động.
Pseudo-class hàm
Các pseudo-class này nhận danh sách bộ chọn hoặc danh sách bộ chọn tha thứ làm tham số.
:is()-
Pseudo-class khớp-bất-kỳ khớp với bất kỳ phần tử nào khớp với bất kỳ bộ chọn nào trong danh sách được cung cấp. Danh sách là tha thứ.
:not()-
Pseudo-class phủ định, hoặc khớp-không-có-gì, đại diện cho bất kỳ phần tử nào không được đại diện bởi đối số của nó.
:where()-
Pseudo-class điều chỉnh specificity khớp với bất kỳ phần tử nào khớp với bất kỳ bộ chọn nào trong danh sách được cung cấp mà không thêm bất kỳ trọng số specificity nào. Danh sách là tha thứ.
:has()-
Pseudo-class quan hệ đại diện cho phần tử nếu bất kỳ bộ chọn tương đối nào khớp khi được neo vào phần tử đính kèm.
Pseudo-class trạng thái tùy chỉnh
Các pseudo-class này áp dụng cho các phần tử tùy chỉnh.
:state()-
Khớp với các phần tử tùy chỉnh có trạng thái tùy chỉnh được chỉ định.
Pseudo-class trang
Các pseudo-class này liên quan đến các trang trong tài liệu in và được sử dụng với at-rule @page.
Pseudo-class chuyển tiếp view
Các pseudo-class này liên quan đến các phần tử tham gia vào chuyển tiếp view.
:active-view-transition-
Khớp với phần tử gốc của tài liệu khi chuyển tiếp view đang diễn ra (đang hoạt động) và ngừng khớp khi quá trình chuyển tiếp hoàn thành.
:active-view-transition-type()-
Khớp với phần tử gốc của tài liệu khi chuyển tiếp view được chỉ định đang diễn ra (đang hoạt động) và ngừng khớp khi quá trình chuyển tiếp hoàn thành.
Cú pháp
selector:pseudo-class {
property: value;
}
Giống như các lớp thông thường, bạn có thể kết hợp nhiều pseudo-class tùy thích trong một bộ chọn.
Chỉ mục theo bảng chữ cái
Pseudo-class được định nghĩa bởi một tập hợp các thông số kỹ thuật CSS bao gồm các mục sau:
A
B
:blank(input) Experimental:blank(page):buffering
C
D
E
F
H
I
L
:lang():last-child:last-of-type:left:link:local-linkExperimental
M
N
O
P
R
S
T
U
V
W
Pseudo-class không chuẩn
Các pseudo-class không chuẩn có tiền tố vendor bao gồm:
Tiền tố -moz-
Thông số kỹ thuật
| Specification |
|---|
| HTML # pseudo-classes |
| Selectors Level 4 |
| CSS Scope |
| CSS Paged Media Module Level 3 |
Xem thêm
- Pseudo-elements
- CSS selectors module