Selector trong CSS3

Selector là một phần không thể thiếu trong CSS và bài hôm nay ngoài những selector mình đã giới thiệu với mọi người trong bài Selector trong CSS thì bài này mình sẽ giới thiệu với mọi người các selector mới được thêm vào trong CSS3.

1, Các selector trong CSS3.

-Vì các loại selector này rất khó đặt tên mình xin được phép trình bày dưới dạng table cho các bạn dễ quan sát.

Selector	Example	Description
selector[attribute^=value]	`a[href^="https://toidicode.com"]`	Chọn tất cả các thành phần có thuộc tính bắt đầu bằng value.
selector[attribute$=value]	`a['href'="/"]`	Chọn tất cả các thành phần có thuộc tính kết thúc bằng value.
selector[attribute*=value]	`div[class*="col-sm"]`	Chọn tất cả các thành phần có thuộc tính chứa giá trị value.
tag1~ tag2	`p ~ div`	Chọn tất cả các thành phần tag1 mà có tag0 ở trước.
selector:only-of-type	`div:only-of-type`	Chọn những thành phần là duy nhất trong cùng một cấp.
selector:only-child	`div:only-child`	Chọn những thành phần mà chỉ có duy nhất một con.
slector:first-of-type	`div:first-of-child`	Chọn thành phần con xuất hiện đầu tiên hoặc duy nhất của thành phần cha.
selector:last-of-type	`div:last-of-type`	Chọn thành phần con xuất hiện cuối cùng hoặc duy nhất của thành phần cha.
slector:nth-child(n)	`div:nth-child(5)`	Chọn thành phần con thứ n trong lớp cha (từ trên xuống).
selector:nth-last-child(n)	`div:nth-child(2)`	Chọn thành phần con thứ n trong lớp cha (tính từ dưới lên).
selector:nth-of-type(n)	`div:nth-of-child(3)`	Chọn thành phần thứ n trong thành phần cha.
selector:nth-last-of-type(n)	`div:nth-last-of-child`	Chọn thành phần thứ n tính từ cuối lên trong thành phần cha.
selector:last-child	`div:last-child`	Chọn thành phần cuối cùng trong thành phần cha.
:root	`:root`	Chọn thành phần gốc của thành phần được chọn
selector:empty	`div:empty`	Chọn thành phần không chứa gì cả.
selector:target	`p:target`	Chọn tất cả các thành phần là neo của các thẻ a.
selector:enabled	`.form-control:enabled`	Chọn tất cả các thành phần đang được enable (sử dụng cho form).
selector:disabled	`.form-control:disabled`	Chọn tất cả các thành phần đang disable (sử dụng cho form).
selector:checked	`.form-control:checked`	Chọn tất cả các thành phần đang được checked (sử dụng cho form).
slector:not()	`div:not(p)`	Chọn tất cả các thành phần ngoại trừ các thành phần được liệt kê trong ngoặc.
selector:required	`input:require`	Chọn tất cả các thành phần có thuộc tính require (trong form).
selector::selection	`:require`	Chọn tất cả các thành phần đang được selection.

-Ngoài ra còn một số các selector khác, nhưng rất ít khi sử dụng mình không nhắc đến ở đây.

2, Lời kết.

-Qua các selector mình giới thiệu với mọi người ở trên thì chắc các bạn cũng đã nhận ra CSS3 quả thật là một bước tiến mới cho giới front-end đúng không? Nhưng chưa hết đâu, các bạn hãy theo dõi series này của mình để xem những điều thú vị hơn ở phía sau.