30 CSS selectors cần nhớ (P2)

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

Demo

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)

Demo

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