::CSS3

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.

Đầu trang