DANH MỤC: CSS 3

Bài 1: 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.

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

The best way to learn is to share

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia