CSS Selectors là một khái niệm rất quan trọng trong CSS. Nếu như trong thực tế bạn phải biết địa chỉ của 1 ngôi nhà mới có thể tìm tới ngôi nhà đó thì trong CSS, bạn phải nắm rỏ khái niệm CSS Selectors, bạn mới có thể xác định được chính xác đối tượng mà bạn muốn định dạng. Việc không nắm rỏ CSS Selectors có thể sẽ dẫn tới việc lạm dụng các thuộc tính id và class, đồng thời khiến code css của bạn trở nên rối rắm và khó kiểm soát.
Trong khuôn khổ bài viết này, tôi sẽ giới thiệu tổng quan về CSS Selectors, đồng thời cũng giới thiệu 1 số CSS Selectors thường được sử dụng.
1. Khái niệm quan hệ "gia đình" trong CSS
Giả sử, ta có 1 tài liệu có code HTML như sau:
<body> <h1>Lorem ipsum</h1> <ul id="wrapper"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">JQuery</a></li> </ul> <p class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> <p><strong>Pellentesque nibh</strong> purus, volutpat faucibus a, dictum in dolor.</p> <img src="image1.jpg" alt="tree"/> <img src="image2.jpg" alt="plant"/> </body>
Nếu xem tài liệu HTML như 1 "cây phả hệ" thì body chính là gốc của "cây phả hệ" đó. Các thẻ h1, ul, 2 thẻ p và 2 thẻ img được bao bởi thẻ body chính là "con" của gốc body. Thẻ ul chứa trong nó 4 thẻ li, các thẻ li này là "con" của thẻ ul và là "cháu" của gốc body trên "cây phả hệ". Cứ tiếp tục như thế, ta sẽ lập được "cây phả hệ" tương ứng với tài liệu HTML đã cho ở trên:
2. Universal selector: Khi bạn muốn hướng tới mọi thành phần của HTML thì ta sẽ dùng Universal selector (viết là *). Đây chính là Selector yếu nhất của CSS (có mức độ ưu tiên thấp nhất - mức độ ưu tiên của selector sẽ được trình bày sau) và thường được sử dụng để reset css.
* { margin: 0; padding: 0 }
3. Type selectors: 1 type selector sẽ hướng tới với 1 thẻ HTML cụ thể nào đó
h1 { color: red }
Đoạn CSS sẽ thiết định tất cả các thành phần h1 trong HTML có màu chữ là màu đỏ.
4. Class selectors & ID selectors
Class và id là thuộc tính có thể có của mọi thẻ HTML. Mỗi thẻ chỉ có thể có duy nhất 1 ID (ID này cũng là duy nhất trong toàn bộ code HTML) và có thẻ có nhiều thuộc tính class. Ngoài ra 1 class thì có thể áp dụng cho nhiều thẻ HTML khác nhau.
Cách sử dụng Class và id selector như sau
#wrapper { margin: 5 auto; }
.box {border: 1px solid red;}
p.item {color: red;}
Đoạn CSS sẽ thiết lập định dạng cho thẻ có id là wrapper, các thẻ các class là box và các thẻ p có class là item (các thẻ khác có class là item cũng không ảnh hưởng). Chú ý là bạn phải ghi liền p và .item (nếu ghi cách ra thì ý nghĩa của selector sẽ khác).
5. Descendant selectors: Khi muốn hướng tới 1 thành phần trong 1 thành phần khác, ta sẽ sử dụng descendant selector
Ví dụ:
p strong { color: red }
Trong ví dụ trên, chúng ta sẽ thiết lập thuộc tính color cho tất cả các thẻ strong thuộc 1 thẻ p nào đó (các thẻ strong không nào trong thẻ p sẽ không được thiết lập).
6. Child selectors: Selector này sẽ hướng tới 1 thành phần là con của 1 thành phần nào đó trong cây phả hệ đã được trình bày ở trên
Ta có ví dụ
p > strong { color: red }
Trong ví dụ trên thì chỉ có những thẻ strong là con của 1 thẻ p nào đó được chọn (các thẻ strong nằm trong p, nhưng không phải là con của p cũng không được chọn).
7. Adjacent sibling selectors: Loại selector này có cú pháp là E1 + E2, trong đó E2 là thành phần cần hướng đến và loại selector này chỉ có tác dụng khi E1 và E2 có cùng 1 cha trong cấu trúc cây HTML đồng thời E1 là thành phần nằm liền trước E2
ul > p { color: red }
Đối với trang HTML có cấu trúc như ví dụ đầu tiên thì đoạn CSS trên sẽ ảnh hưởng tới thẻ p có class là item1 (vì thẻ p này nằm liền sau thẻ ul, và 2 thẻ này có cùng 1 cha là body).
8. Attribute selectors: Loại selector sẽ dựa vào thuộc tính của từng thành phần để xác định được thành phần cần hướng đến.
Ta sẽ sử dùng đoạn CSS sau để thiết lập thuộc tính border cho tất cả các thẻ img có thuộc tính alt là tree (các thẻ img khác không có thuộc tính alt hoặc thuộc tính alt mang giá trị khác sẽ không ảnh hưởng.
img[alt=tree] { border: 1px solid red; }
9. Pseudo classes & Pseudo elements
- Pseudo elements & Pseudo classes là gì?
- - Nếu như các selectors khác xác định 1 thành phần dựa vào vị trí của thành phần trên document tree thì với pseudo elements và pseudo classes, CSS cho phép xác định 1 thành phần dựa trên thông tin nằm ngoài document tree.
- - Pseudo elements tạo ra các khái niệm trừu tượng về document tree ngoài các quy định của HTML và XHTML. Ví dụ, HTML và XHTML không có cơ chế cho phép truy cập đến ký tự đầu tiên hay dòng đầu tiên của một thành phần nào đó. Tuy nhiên với pseudo elements, ta có thể hướng đến các thành phần này.
- - Pseudo classes phân loại các thành phần dựa vào các yếu tố khác thay vì dựa vào tên, thuộc tính hay nội dung như các selectors khác. Pseudo classes có tính động, có nghĩa là 1 thành phần có thể có được hoặc mất đi 1 pseudo class khi người dùng tương tác với thành phần đó (trừ :first-child và :last-child có thể rút trích ra từ document tree).
- Một số Pseudo elements thường dùng
- - :first-line & :first-letter: lựa chọn dòng đầu tiên và ký tự đầu tiên của 1 thành phần nào đó
p:first-line {color: red} p:first-letter {color:yellow; font-size: 20px} - - :before & :after: có thể được dùng để tạo ra nội dung trước và sau nội dung của 1 thành phần nào đó
blockquote:before {content: open-quote;} blockquote:after {content: close-quote;} - Một số Pseudo classes thường dùng
- - :first-child, :last-child
Ví dụ đoạn CSS sẽ thiết lập thuộc tính border màu đỏ cho thẻ li là con đầu tiên của thẻ ul, thuộc tính border màu xanh cho thẻ li là con cuối cùng của thẻ ul
ul li:first-child {border: 1px solid red;} ul li:last-child {border: 1px solid blue;} - - :link, :visited: thường được dùng với thẻ anchor (thẻ a), với a:link xác định các thẻ a đã thiết lập thuộc tính href và a:visited xác định các thẻ liên kết đã được thăm qua
- - :hover, :focus, :active: trong đó :hover là pseudo class có được khi người dùng di chuột qua 1 thành phần nào đó, :focus có được khi 1 thành phần nhận được con trỏ văn bản, :active là khi thành phần đó đang được click chuột
a.link {color: red;}
a.visited {color: #cecece;}
a:hover{ color: yellow;}
a:active {font-size: 2em;}
textarea:focus {border: 1px solid red;}
10. Độ ưu tiên của selecter: Trong CSS thì selector nào mô tả chi tiết hơn sẽ có mức độ ưu tiên cao hơn (có thể hiểu nôm na là selector nào dài hơn sẽ được ưu tiên hơn)
Ví dụ
strong { color: red }
p strong { color: blue }
Đoạn CSS sẽ thiết định tất cả các thẻ strong nằm trong 1 thẻ p nào đó sẽ có màu xanh (thay vì màu đỏ) vì dòng CSS thứ 2 mô tả chi tiết hơn nên có mức độ ưu tiên cao hơn.
11. Grouping: Khi các thành phần có chung 1 style thì ta có thể nhóm các thành phần đó lại với nhau và chỉ phải khai báo css 1 lần duy nhất cho tất cả các thành phần này. Khi grouping thì mỗi selector được phân cách bởi dấu ','
Ví dụ: 3 dòng CSS sau:
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
p { font-family: sans-serif }
có thể được gộp lại thành 1 dòng CSS duy nhất:
h1, h2, p { font-family: sans-serif }
Một số bài viết tham khảo về CSS Selectors
This comment has been removed by the author.
ReplyDeleteKhó quá bạn ơi!
ReplyDelete------------------------------------
Ms Kiều Nga – Nhân Viên Vé Sacojet.vn
Liên hệ: 090 262 1479 – 1900 636 479
Chuyên đặt: Vé máy bay Vietjet Air đi Hải Phòng
Hoặc xem chi tiết: Ve may bay Vietjet Air di Hai Phong uy tin tai Sacojet
Website kiểm tra giá và đặt vé trực tuyến: www.SacoJet.vn
Những chia sẻ thật bổ ích!
ReplyDelete------------------------------------
Ms Kiều Nga – Nhân Viên Vé Sacojet.vn
Liên hệ: 090 262 1479 – 1900 636 479
Chuyên đặt: Vé máy bay Vietjet Air đi Thanh Hóa
Hoặc xem chi tiết: Ve may bay Vietjet Air di Thanh Hoa uy tin tai Sacojet
Website kiểm tra giá và đặt vé trực tuyến: www.SacoJet.vn
sao mình đặt thẻ a:hover{ color:red} mà không được vậy? mình làm trên thanh menu
ReplyDeleteBán thuốc kích dục nữ
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks anh, bài viết khá hữu ích. Bên em có làm một khoá học CSS Cơ Bản cho các bạn mới học. Rất mong anh có thể giới thiệu giúp.
ReplyDeleteCảm ơn anh.