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.

Thuộc tính CSS

Ngoài những thuộc tính của CSS1 và CSS2, ở CSS3 còn có thêm những thuộc tính sau:

Thuộc tính Mô tả
animation Xác định một chuyển động của một thành phần.
appearance Định dạng cho thành phần trông như giao diện chuẩn gần với người dùng.
backface-visibility Xác định bề mặt sau của thành phần khi thực hiện một chuyển động xoay.
background-clip Xác định vùng backgroud được cắt bớt theo vùng được giới hạn.
background-origin Xác định giá trị tương đối của background giới hạn theo vùng giới hạn.
background-size Xác định lại chiều rộng và chiều cao cho background.
background gradient Tạo màu sắc cho background theo biên độ giảm dần.
Nhiều background Sử dụng để khai báo nhiều dạng background khác nhau trong cùng một tag.
border-image Dùng để định dạng các dạng border bằng hình ảnh.
border-radius Dùng để định dạng các dạng bo góc của border.
box-align Xác định vị trí cho thành phần theo chiều dọc hoặc theo chiều thẳng đứng.
box-direction Xác định hướng cho thành phần.
box-flex Xác định sự ưu tiên linh hoạt theo các thành phần khác.
box-ordinal-group Cho biết thứ tự ưu tiên của các thành phần.
box-orient Xác định thành phần dọc theo phương hướng khối hoặc theo trục.
box-pack Định vị trí của thành phần theo mép rìa của thành phần.
box-sizing Xác định lại chiều rộng và chiều cao của thành phần.
box-shadow Định dạng bóng cho thành phần.
column Dùng để chia nội dung thành phần thành nhiều cột khác nhau.
@font-face Định dạng các dạng font chữ khác nhau theo các dạng font riêng.
font-size-adjust Dùng để định dạng điều chỉnh cho font chữ, độ lớn của chữ được thể hiện bởi phép nhân.
@keyframes Dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.
nav Di chuyển qua lại giữa các thành phần điều hướng (navigate) bằng cách di chuyển các phím mũi tên.
opacity Hiển thị cấp độ trong suốt cho thành phần.
perspective Cho ta thấy được chiều sâu của thành phần trong khai báo 3D.
perspective-origin Định nghĩa trục quay cho thành phần có sử dụng perspective.
resize Định dạng cho vùng nội dung mà người dùng có thể thay đổi được kích thước.
text-justify Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự sao cho dàn đều thành phần.
text-overflow Xác định vùng text được cắt bớt.
text-shadow Xác định bóng đỗ cho text.
transform Xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng, ...
transform-origin Xác định trục cho một chuyển đổi 2 chiều, 3 chiều.
transform-style Các thành phần bên trong sẽ giữ vị trí 3D của nó.
transition Xác định một quá trình chuyển đổi khi có một hành động.
word-break Sẽ làm cho những chữ trong một từ không còn là một thể thống nhất, nghĩa là có thể xuống hàng bất cứ vị trí nào trong từ.
word-wrap Sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout.
THUỘC TÍNH CHƯA ĐƯỢC HỖ TRỢ BỞI TRÌNH DUYỆT
grid-columns Xác định chiều rộng cho các cột trong định dạng lưới.
grid-rows Xác định chiều rộng cho các hàng trong dạng lưới.
hanging-punctuation Xác định một dấu chấm câu có thể đặt ở đầu hoặc ở cuối của một dòng văn bản.
icon  
punctuation-trim Xác định một ký tự dấu chấm câu nên được cắt nếu nó xuất hiện ở đầu hoặc cuối của một dòng, hoặc tiếp giáp với một ký tự dấu chấm câu đầy đủ chiều rộng khác.
rotation Xoay một thành phần theo một điểm.
target Xác định cách thức mở ra một liên kết như: tab, popup, ...
text-outline Xác định dạng vùng biên cho text.
text-wrap Định dạng dòng text có bị ngắt đoạn hay không.

Đầu trang