CSS selectors

Module CSS selectors định nghĩa các mẫu để chọn các phần tử mà một tập hợp quy tắc CSS sau đó sẽ được áp dụng cùng với specificity của chúng. Module CSS selectors cung cấp hơn 60 selector và năm combinator. Các module khác cung cấp thêm các pseudo-class selector và pseudo-element.

Note: Trang này giới thiệu một module CSS. Để tìm danh sách đầy đủ tất cả các selector được định nghĩa trong các đặc tả CSS, hãy xem trang tham chiếu selectors.

Trong CSS, selector là các mẫu dùng để khớp hoặc chọn các phần tử bạn muốn tạo kiểu. Selector cũng được dùng trong JavaScript để cho phép chọn các node DOM trả về dưới dạng NodeList.

Selector, dù dùng trong CSS hay JavaScript, đều cho phép nhắm mục tiêu vào các phần tử HTML dựa trên loại, thuộc tính, trạng thái hiện tại, thậm chí vị trí trong DOM. Combinator cho phép bạn chọn chính xác hơn bằng cách chọn các phần tử dựa trên mối quan hệ của chúng với các phần tử khác.

:active
:any-link
:autofill
:buffering
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:future
:has()
:hover
:in-range
:indeterminate
:interest-source
:interest-target
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:matches() (obsolete legacy selector alias for :is())
:modal
:muted
:not()
:nth-child()
:nth-of-type()
:nth-last-child()
:nth-last-of-type()
:only-child
:only-of-type
:open
:optional
:out-of-range
:past
:paused
:picture-in-picture
:placeholder-shown
:playing
:popover-open
:read-only
:read-write
:required
:root
:scope
:seeking
:stalled
:target
:user-invalid
:user-valid
:valid
:visited
:volume-locked
:where()
:-webkit- pseudo-classes
Attribute selectors
Class selector
ID selectors
Type selectors
Universal selectors

Module CSS selectors cũng giới thiệu các pseudo-class :blank, :current và :local-link. Hiện tại chưa có trình duyệt nào hỗ trợ những tính năng này.

Thuật ngữ

Hướng dẫn

CSS selectors and combinators: Tổng quan về các loại simple selector khác nhau và nhiều combinator được định nghĩa trong module CSS selectors và module CSS pseudo.
CSS selector structure: Giải thích cấu trúc của CSS selector và các thuật ngữ được giới thiệu trong module CSS selectors, từ "simple selector" đến "forgiving relative selector list".
Pseudo classes: Liệt kê các pseudo-class, là các selector cho phép chọn phần tử dựa trên thông tin trạng thái không có trong cây tài liệu, được định nghĩa trong các module CSS và HTML.
Using the :target pseudo-class in selectors: Tìm hiểu cách sử dụng pseudo-class :target để tạo kiểu cho phần tử đích của fragment identifier trong URL.
Privacy and the :visited selector: Khám phá các giới hạn tạo kiểu được đặt ra trên class :visited nhằm bảo vệ quyền riêng tư của người dùng.
CSS building blocks: CSS selectors: Giới thiệu về các CSS selector cơ bản, bao gồm hướng dẫn về Type, class, and ID selectors, Attribute selectors, Pseudo-classes and pseudo-elements và Combinators.
Learn: UI pseudo-classes: Tìm hiểu các UI pseudo-class khác nhau có sẵn để tạo kiểu form ở các trạng thái khác nhau.
Selection and traversal on the DOM tree: Selectors API cho phép sử dụng selector trong JavaScript để lấy các node phần tử từ DOM.