Mọi bộ chọn CSS thông dụng, nhóm theo họ: cơ bản, combinator, pseudo-class, pseudo-element và bộ chọn thuộc tính. Mỗi dòng ghép bộ chọn với một ví dụ một dòng.
Bộ chọn xác định các phần tử mà quy tắc áp dụng vào. Khi nhiều quy tắc cùng khớp, độ đặc hiệu quyết định quy tắc nào thắng: inline thắng id, id thắng class, class thắng type. Hãy đọc bộ chọn từ phải sang trái: trình duyệt khớp phần ngoài cùng bên phải trước, rồi đi ngược lên theo các combinator. Các họ dưới đây phủ gần như mọi thứ bạn sẽ viết.
Bảng tham chiếu · 53 mục
Bộ chọn CSSExplained
53 of 53 rows
Cơ bản
Mọi phần tử dùng thẻ đó.
button { }
Phần tử mang class đó.
.active { }
Phần tử duy nhất mang id đó.
#header { }
Mọi phần tử.
* { box-sizing: border-box; }
Gốc của tài liệu; nơi thường đặt custom property toàn cục.
:root { --gap: 1rem; }
Phần tử khớp với A hoặc B (nhóm lại).
h1, h2, h3 { }
Combinator
B bất kỳ là hậu duệ của A.
nav a { }
B là con trực tiếp của A.
ul > li { }
B nằm ngay sau A, cùng cha.
h1 + p { }
Mọi B theo sau A, cùng cha.
h1 ~ p { }
Pseudo-class (trạng thái)
Phần tử khi con trỏ đang nằm trên nó.
a:hover { }
Phần tử đang nhận tiêu điểm bàn phím.
input:focus { }
Phần tử là con đầu tiên của cha nó.
li:first-child { }
Con thứ n; nhận công thức như 2n.
tr:nth-child(2n) { }
Phần tử không khớp bất kỳ bộ chọn con nào bên trong; nhận danh sách từ Selectors 4.
li:not(:first-child, .skip) { }
Checkbox, radio hoặc option đang được chọn.
input:checked { }
Input hoặc nút bị vô hiệu hóa.
button:disabled { }
Cha chứa một phần tử khớp với bộ chọn bên trong.
li:has(ul) { }
Bất kỳ bộ chọn nào trong danh sách; độ đặc hiệu bằng mức cao nhất trong danh sách.
:is(ol, ul) li { }
Giống :is(), nhưng độ đặc hiệu bằng không.
:where(ol, ul) li { }
Tiêu điểm cần hiện vòng, thường đến từ bàn phím.
a:focus-visible { }
Phần tử mà chính nó hoặc hậu duệ đang nhận tiêu điểm.
form:focus-within { }
Phần tử là con cuối cùng của cha nó.
li:last-child { }
Phần tử không có anh em.
p:only-child { }
Anh em thứ n cùng thẻ; nhận công thức như 2n.
p:nth-of-type(2n) { }
Anh em đầu tiên hoặc cuối cùng cùng thẻ.
p:first-of-type { }
Phần tử không có con và không có chữ.
td:empty { }
Liên kết chưa ghé và liên kết đã ghé.
a:visited { }
Input bắt buộc và input để tùy chọn.
input:required { }
Input có giá trị đạt hoặc trượt quy tắc kiểm tra của nó.
input:invalid { }
Input mà người dùng không thể sửa.
input:read-only { }
Phần tử có id khớp với phần fragment của URL.
#note:target { }
Option được chọn sẵn hoặc nút mặc định của nhóm.
input:default { }
Checkbox được script đặt sang trạng thái không xác định.
input:indeterminate { }
Bất kỳ phần tử dựng sẵn nào, hoặc custom element sau khi được đăng ký.
my-widget:defined { }
Phần tử viết bằng ngôn ngữ cho trước.
p:lang(fr) { }
Pseudo-element
Một nút nội dung được sinh ra trước phần tử.
label::before { content: ""; }
Một nút nội dung được sinh ra sau phần tử.
code::after { content: ";"; }
Chữ cái đầu của một khối văn bản.
p::first-letter { }
Chữ placeholder của input.
input::placeholder { }
Dòng đầu của một khối văn bản.
p::first-line { }
Đoạn văn bản người dùng đang bôi đen.
::selection { }
Dấu đầu dòng hoặc số thứ tự của mục trong danh sách.
li::marker { }
Vùng phía sau phần tử toàn màn hình hoặc dialog.
dialog::backdrop { }
Nút duyệt tệp nằm bên trong input chọn tệp.
input::file-selector-button { }
Một phần shadow-DOM mà host đã mở ra.
my-widget::part(header) { }
Bộ chọn thuộc tính
Phần tử có thuộc tính đó, bất kể giá trị.
[required] { }
Thuộc tính bằng đúng val.
[type="submit"] { }
Thuộc tính bắt đầu bằng val.
a[href^="https"] { }
Thuộc tính kết thúc bằng val.
a[href$=".pdf"] { }
Thuộc tính chứa val.
a[href*="login"] { }
Danh sách phân cách bằng khoảng trắng có chứa val.
[class~="badge"] { }
Giá trị bằng val hoặc bắt đầu bằng val theo sau là dấu gạch nối.