Bộ chọn CSS (selectors)
Ngoài những bộ chọn (selectors) của CSS1 và CSS2, ở CSS3 còn có thêm những bộ chọn sau:
| Bộ chọn | Ví dụ | Mô tả |
|---|---|---|
| tag01~tag02 | ul~p | Chọn tất cả thành phần 02 khi có thành phần 01 ở trước. |
| [attribute^=value] | img[src^="bnr_"] | Chọn tất cả thành phần với thuộc tính có giá trị bắt đầu bằng "value". |
| [attribute$=value] | img[src$=".gif"] | Chọn tất cả thành phần với thuộc tính có giá trị kết thúc bằng "value". |
| [attribute*=value] | img[src*=""] | Chọn tất cả thành phần với thuộc tính có giá trị đặc biệt bằng "value". |
| :first-of-type | p:first-of-type | Chọn thành phần con đầu tiên hoặc duy nhất trong các thành phần cha. |
| :last-of-type | p:last-of-type | Chọn thành phần con cuối cùng hoặc duy nhất trong các thành phần cha. |
| :only-of-type | p:only-of-type | Chọn thành phần con trong các thành phần cha, khi thành phần cha có một thành phần con là chính nó. Trong thành phần cha có thể chứa nhiều thành phần con, tuy nhiên thành phần con được chọn phải là duy nhất, không được có từ 2 trở lên. |
| :only-child | p:only-child | Chọn thành phần con trong các thành phần cha, khi thành phần cha có mỗi thành phần con là chính nó, không được chứa thành phần con khác. Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn. |
| :nth-child(n) | p:nth-child(3) | Chọn thành phần thứ "n" trong thành phần cha. Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn. |
| :nth-last-child(n) | p:nth-last-child(3) | Chọn thành phần thứ "n" tính từ thành phần cuối trong thành phần cha. Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn. |
| :nth-of-type(n) | p:nth-of-type(3) | Chọn thành phần thứ "n". |
| :nth-last-of-type(n) | p:nth-last-of-type(3) | Chọn thành phần thứ "n" từ thành phần cuối trong thành phần cha. |
| :last-child | p:last-child | Chọn thành phần cuối cùng trong thành phần cha. Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn. |
| :root | :root | Chọn thành phần gốc của văn bản. |
| :empty | p:empty | Chọn thành phần không chứa thành phần khác. |
| :target | #event:target | Sử dụng trong liên kết anchor name (link neo). |
| :enabled | input:enabled | Chọn thành phần được kích hoạt (enabled), thường sử dụng cho các thành phần của form. |
| :disabled | input:disabled | Chọn thành phần bị vô hiệu hóa (disabled), thường sử dụng cho các thành phần của form. |
| :checked | input:checked | Chọn thành phần được check (checked), thường sử dụng cho các thành phần của form. |
| :not(bộ chọn) | :not(p) | Chọn tất cả ngoại trừ bộ chọn trong ngoặc. |
| ::selection | ::selection | Chọn phần tử được người dùng chọn. |