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 . 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

Demo

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

Demo

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

Demo

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

Demo

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.

Demo

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

Demo

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

Demo

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

Demo

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.

Demo

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!