30 CSS selectors cần nhớ (P2)
This post hasn't been updated for 8 years
16. X[foo~="bar"]*
/* Css1*/
a[data-info~="external"] {
color: red;
}
/* Css2*/
a[data-info~="image"] {
border: 1px solid black;
}
Selector này sử dụng attribute
thể select
. Ta thấy có điều đặc biệt là nó sử dụng dấu ~
.
Nó cho phép ta select element theo attribute
được phân cách bởi space
(dấu cách).
Ví dụ ta có HTML như sau:
<a href="http://www.google.com" data-info="external" title="Some title">consectetur</a>
<a href="http://d2o0t5hpnwv4c1.cloudfront.net/839_git/preview.jpg" data-info="external image" class="hoverZoomLink">Getting Good with Git</a>
Ta thấy thẻ a
thứ 2 có phần attribute data-info="external image"
. Chú ý external
và image
có dấu cách(space) ở giữa
Quay trở lại đoạn CSS ở trên. Css1 định nghĩa style cho attribute data-info
có tên là external
Css2 cũng định nghĩa style cho data-info
nhưng với tên khác image
Trong thẻ a
thứ nhất chỉ tồn tại external nên chi đc áp dụng css1, còn thẻ a
thứ 2 có cả exxternal
và image
nên nó sẽ đc áp dụng cả 2 style trên
Compatibility:
- IE 7+
- Firefox
- Chrome
- Safari
- Opera
17. X:checked
input[type=radio]:checked {
border: 1px solid black;
}
Đây là 1 class
giả - pseudo class nó chỉ áp dụng với tag radio
và checkbox
. Lý do đơn giản là chỉ có chúng mới có thể tick chọn được thôi (haha)
Compatibility:
- IE 9+
- Firefox
- Chrome
- Safari
- Opera
18. X:after
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
:after
- pseudo class. Tương ứng với tên gọi của nó. Nó sẽ append toàn bộ css đã
được định nghĩa vào sau X
.
[Demo]
Compatibility:
- IE 8+
- Firefox
- Chrome
- Safari
- Opera
19. X:hover
div:hover {
background: #e3e3e3;
}
Selector này thì chắc hẳn đã quá quen thuộc rồi.
CSS
được định nghĩa trong :hover
sẽ có hiệu lực khi ta rê chuột lên element đó.
Ví dụ:
a:hover {
border-bottom: 1px solid black;
}
=> Mọi thẻ a
khi rê chuột vào sẽ có viền đen với kích thước 1px.
Compatibility:
- IE 6+
- Firefox
- Chrome
- Safari
- Opera
20. X:not(Y)
div:not(Y) {
color: blue;
}
Mình gọi nó là selector
phủ định . Câu văn đại loại là "áp dụng CSS cho những thằng
không phải là Y
Ví dụ:
*:not(p) {
color: green;
}
=> tất cả những tag
không phải p
sẽ có màu xanh
Compatibility:
- IE 9+
- Firefox
- Chrome
- Safari
- Opera
21. X::pseudoElement
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Ta có thể sử dụng element giả hay còn gọi là pseudo elements
bằng cách sử dụng
dấu ::
để định nghĩa style cho element.
Dưới đây là danh sách 1 số psedo elements:
- first-line: Dòng đầu tiên
- first-letter: Ký tự đầu tiên
- before: Trước element
- after: Sau element
Compatibility:
- IE 6+
- Firefox
- Chrome
- Safari
- Opera
22. X:nth-child(n)
li:nth-child(3) {
color: red;
}
Tham số n
là 1 số cụ thể tương ứng với số thứ tự element tính từ trên xuống
Ví dụ trên sẽ định nghĩa style cho những thẻ li thứ 3. Chú ý số đêm được tính từ 1
Compatibility:
- IE 9+
- Firefox 3.5+
- Chrome
- Safari
23. X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
Tương tự như n
ở selector trên, nhưng ở đây n
sẽ là số thứ tự của element được tính từ dưới lên.
nth-last-child
sẽ style cho những element X
thứ n
tính từ dưới lên
Compatibility:
- IE 9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
Có lúc thay vì chọn 1 element bất kỳ ta sẽ cần chọn nhiều element. Đó là
lý do nth-of-type
được sinh ra.
Tham số n
là 1 số cụ thể tương ứng với số thứ tự element tính từ trên xuống
Ví dụ trên sẽ quy định đường viền đen cho thẻ ul
thứ 3.
Compatibility:
- IE 9+
- Firefox3.5+
- Chrome
- Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 1px solid black;
}
Chắc hẳn bạn đã thấy có điều gì đó quen thuộc ở đây :v
Đúng vậy nth-last-of-type
cũng tương tự như nth-of-type
.
có điều nó nhận vào tham số n
là số thứ tự của element được tính từ dưới lên.
Compatibility:
- IE 9+
- Firefox3.5+
- Chrome
- Safari
- Opera
26. X:first-child
ul li:first-child {
border-top: none;
}
first-child
- pseudo class. Định nghĩa style cho element đầu tiên
Compatibility:
- IE 7+
- Firefox
- Chrome
- Safari
- Opera
27. X:last-child
ul > li:last-child {
color: green;
}
last-child
- pseudo class. Định nghĩa style cho element cuối cùng
Demo
Compatibility:
- IE 9+
- Firefox
- Chrome
- Safari
- Opera
28. X:only-child
div p:only-child {
color: red;
}
Chỉ select những element duy nhất của element cha.
Ví dụ ta có đoạn mã HTML như thế này:
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
Đoạn css trên sẽ style cho thẻ p
nào là con duy nhất của thẻ div
.
Cụ thể là text của nó sẽ mang màu đỏ. Như vậy nó sẽ áp dụng style cho thẻ div đầu tiên
Compatibility:
- IE 7+
- Firefox
- Chrome
- Safari
- Opera
29. X:only-of-type
li:only-of-type {
font-weight: bold;
}
Selector này sẽ target vào 1 type element duy nhất trong container. Nghĩa là trong container chỉ tồn tại duy nhất 1 type duy nhất thì nó mới được select
Ví dụ:
ul > li:only-of-type {
font-weight: bold;
}
=> áp dụng font-weight
cho li
thuộc ul
- chỉ chứ duy nhất 1 thẻ li
(ngoài ra không còn li
nào khác thuộc ul
Compatibility:
- IE 9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
30. X:first-of-type
first-of-type
cho phép ta chọn những element con đầu tiên nằm trong type element cha.
Ví dụ:
ul:first-of-type {
font-weight: bold;
}
=> lấy tất cả element con nằm trong ul
đầu tiên.
Compatibility:
- IE 9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
Vậy là hết cám ơn các bạn đã đọc bài viết. Phần sau mình sẽ hướng dẫn các bạn custom 1 số thành phần của trang web theo ý thích của mình.
Happy Codding!
All Rights Reserved