30 CSS selectors cần nhớ (P1)
Bài đăng này đã không được cập nhật trong 2 năm
Trong bài này mình xin giới thiệu tới các bạn 30 css selector cần nhớ. Do phần này hơi dài nên mình sẽ giới thiệu trước 15 selector. Phần còn lại mình sẽ cập nhật vào tháng sau. Nếu bạn còn thắc mắc css selector là gì thì có thể đọc bài Css Selectors của anh Tran Duc Thang
1. *
* {
margin: 0;
padding: 0;
}
Selector này chắc hẳn đã rất quen thuộc. Với *
có nghĩa là chọn tất cả elements.
Với cách viết như ví dụ trên thì tất cả các thẻ trong website đều được áp dụng 2 thuộc tính margin
, padding
với giá trị 0
.
*
cũng có thể sử dụng để chọn tất cả các elements trong 1 element. Ví dụ:
#container * {
border: 1px solid black;
}
=> áp dụng cho tất cả các elements
là con của #container.
Compatibility:
- IE6+
- Firefox
- Chrome
- Safari
- Opera
2.#X
#container {
width: 960px;
margin: auto;
}
#
là id
selector. Css ứng với selector này được áp dụng cho duy nhất 1 element
có id="X"
. Vì id
là duy nhất nên nó không thể tái sử dụng.
Compatibility:
- IE6+
- Firefox
- Chrome
- Safari
- Opera
3. .X
.error {
color: red;
}
Đây là class
selector. Với class
selector thì ta có thể tái sử dụng chúng. Vì class có thể đặt ở nhiều nơi. Đây cũng là sự khác nhau của id
và class
selector.
Compatibility:
- IE6+
- Firefox
- Chrome
- Safari
- Opera
4.X Y
li a {
text-decoration: none;
}
Đây gọi descendant
selector. Khi ta cần chỉ rõ phạm vi áp dụng css cho element. Ví dụ trên có nghĩa là tất cả các tag a
nằm trong tag li
thì đều mang giá trị css text-decoration: none
. X Y chỉ là đại diện cho selector. Không nhất thiết phải là tag
element. Ta có thể hoặc xen kẽ thêm nhiều tấng id, class, type
selector.
Ví du:
#table td.title {
text-align: center;
}
Compatibility:
- IE6+
- Firefox
- Chrome
- Safari
- Opera
5. X
a { color: red; }
ul { margin-left: 0; }
Type
selector được sử dụng khi ta muốn áp dụng CSS cho tất cả các tag cùng tên trong page.
Compatibility:
- IE6+
- Firefox
- Chrome
- Safari
- Opera
6. X:visited and X:link
a:link { color: red; }
a:visted { color: purple; }
:link
là pseudo-class. Nó trỏ đến các tag a
mà chưa được click.
a:visted
ngược lại với :link
nó trỏ đến các tag a
đã được click
Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Opera
7. X + Y
ul + p {
color: red;
}
Đây gọi là adjacent
selector. Như tên gọi của nó. Phạm vi áp dụng là những element liền kề ngay sau selector được khai báo(X
). Trong ví dụ trên ta có thể hiểu là: Css áp dụng cho thẻ p đầu tiên đứng ngay sau thẻ ul sẽ có color: red;
Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Opera
8.X > Y
div#container > ul {
border: 1px solid black;
}
X > Y
khác X Y
ở chỗ X > Y
sẽ lấy phần tử con Y
trực tiếp của X
chứ ko lấy tất cả các phần tử con khác. Như ví dụ trên thì chỉ có thẻ ul
là con trực tiếp của div#container
mới được lấy
Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Opera
9. X ~ Y
ul ~ p {
color: red;
}
Nó tương tự X+Y nhưng ít nghiêm ngặt hơn, có nghĩa là X+Y
sẽ lấy phần tử Y
đầu tiên sau X
còn X~Y
thì nó sẽ lấy tất cả Y
sau X
Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Opera
10. X[title]
a[title] {
color: green;
}
Nó được gọi là attributes
selector. Selector này sẽ lấy theo thuộc tính. Như ví dụ trên thì nó sẽ lấy tất cả các thẻ a
mà có thuộc tính [title]
Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Opera
11. X[href="foo"]
a[href="http://google.com"] {
color: #1f6053;
}
Đây cũng vẫn là attributes
selector nhưng nó chi tiết hơn. Nó truyền theo giá trị của attributes
. Lưu ý giá trị phải được đặt trong dấu ""
.
Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Opera
12. X[href*="viblo"]
a[href*="https://viblo.asia"] {
color: red;
}
Ta thấy selector này có thêm dấu *
ở phần attributes.
Ví dụ trên có nghĩa là lấy tất cả thẻ X
có thuộc tính href
và giá trị có chứa từ viblo
Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Opera
13. X[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
=> Lấy tất cả thẻ a
mà có thuộc tính href
bắt đầu bằng http
Với selector này, ta có thể tham chiếu đến element có thuộc tính mang giá trị bắt đầu bằng value. Chỉ cần thêm kí tự carat "^" như ở trên.
Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Opera
14. X[href$=".jpg"]
a[href$=".jpg"] {
color: red;
}
Trái ngược với selector trên, nó tham chiếu đến element có thuộc tính mang giá trị kết thúc bằng value.
Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Opera
15. name[data-*="value"]
Chuyện gì xảy ra nếu chúng ta muốn tham chiếu đến tất cả liên kết đến mọi định dang file ảnh .jpg, .png, .gif. Nếu sử dụng với kí tự $, chúng ta cần nhiều dòng css như sau:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
Để linh động, chúng ta có thể tự đặt thuộc tính riêng attribute-name (thông thường ta sẽ bắt đầu với data-attributename).
Compatibility:
- IE7+
- Firefox
- Chrome
- Safari
- Opera
Trên đây là phần tìm hiểu của mình. Chắc không tránh khỏi thiếu xót. Mong các bạn comment góp ý để bài viết được hoàn thiện hơn.
Happy codding!
Nguồn tham khảo:
All rights reserved