30 CSS selectors cần nhớ (P2)

HTML - CSS 17/09/2017 07:00 574
Trong bài viết tiếp theo này mình vẫn sẽ tóm tắt tới các bạn 30 css selector mà bất kỳ lập trình viên phát triển website, hay app mobile cũng cần phải nhớ và bỏ túi.

Trong bài trước mình đã tổng hợp 15 CSS Selector mà bất kỳ lập trình viên phát triển web, app mobile nào cũng phải nhớ và bỏ túi.

16. X[foo~=”bar”]*

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 chọn element theo attribute được phân cách bởi space(dấu cách).

/* Css1*/
a[data-info~="external"] {
	color: red;
}
/* Css2*/
a[data-info~="image"] {
	border: 1px solid black;
}

Ví dụ:

<a href="http://www.google.com.vn" data-info="external" title="Google Search">Google Search</a>
<a href="http://d2o0t5hpnwv4c1.cloudfront.net/839_git/preview.jpg" data-info="external image" class="hoverZoomLink">CDN System Globe</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ả external 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

Đây là một class giả – pseudo class nó chỉ áp dụng với hai tag radio và checkbox. Lý do đơn giản là chỉ có chúng mới có thể tick chọn được thôi.

input[type=radio]:checked {
    border: 1px solid black;
}

Compatibility:

  • IE 9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

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

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Compatibility:

  • IE 8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19. X:hover

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

div:hover {
  background: #e3e3e3;
}

Ví dụ:

a:hover {
    border-bottom: 1px solid black;
}

Xem kết quả

P/s: 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)

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

X:not(Y) {
	color: blue;
}

Ví dụ:

.*:not(span){
	 border-bottom: 1px solid black;
}

Xem kết quả

Compatibility:

  • IE 9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21. X::pseudoElement

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 một số psedo elements:

  • first-line: Dòng đầu tiên
  • first-letter: Ký tự đầu tiên
  • before: Trước element
  • after: Sau element
p::first-line {
  font-weight: bold;
  font-size: 1.2em;
}

Compatibility:

  • IE 6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22. X:nth-child(n)

Tham số n là một số cụ thể tương ứng với số thứ tự element tính từ trên xuống Ví dụ sau đây sẽ định nghĩa style cho những thẻ li thứ 3. Chú ý số đêm được tính từ 1.

li:nth-child(3) {
  color: red;
}

Xem kết quả

Compatibility:

  • IE 9+
  • Firefox 3.5+
  • Chrome
  • Safari

23. X:nth-last-child(n)

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

li:nth-last-child(2) {
	color: red;
}
Xem kết quả

Compatibility:

  • IE 9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

24. X:nth-of-type(n)

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ụ sau đây sẽ quy định đường viền đen cho thẻ ul thứ 3.

ul:nth-of-type(2) {
	border: 1px solid black;
}

Xem kết quả

Compatibility:

  • IE 9+
  • Firefox3.5+
  • Chrome
  • Safari

25. X:nth-last-of-type(n)

Các bạn có cảm thấy một điều gì đó giống giống và lặp lại ở đây. Đú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.

ul:nth-last-of-type(3) {
  border: 1px solid black;
}

Compatibility:

  • IE 9+
  • Firefox3.5+
  • Chrome
  • Safari
  • Opera

26. X:first-child

first-child – pseudo class. Định nghĩa stylesheet cho element đầu tiên

ul li:first-child {
  color: red;
}

Xem kết quả

Compatibility:
  • IE 7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

Ngược với first-child thì last-child – pseudo class. Định nghĩa stylesheet cho element cuối cùng

ul > li:last-child {
  color: green;
}

Compatibility:

  • IE 9+
  • Firefox
  • Chrome
  • Safari
  • Opera

28. X:only-child

Chỉ select những element là con duy nhất(1) của element cha.

div p:only-child {
  color: red;
}
Ví dụ ta có đoạn mã HTML như thế này:
<div><p> My paragraph here. </p></div>
<div>
   <p> One paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>
Xem kết quả

Đoạn CSS trên sẽ stylesheet 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 stylesheet cho thẻ Div đầu tiên.

Compatibility:

  • IE 7+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

Selector này sẽ target vào một loại element duy nhất trong container. Nghĩa là trong container chỉ tồn tại duy nhất một loại duy nhất thì nó mới được select.

ul > li:only-of-type {
   font-weight: bold;
}

Ví dụ:

<ul class="para">
    <li>Học lập trình PHP</li>
    <li>
        <p>Học lập trình MySQL</p>
    </li>
</ul>
<ul class="para">    
    <li>
        <p>Học lập trình Javasctipt</p>
    </li>
</ul>
<style type="text/css">
    li:only-of-type {
        font-weight: bold;
    }
</style>

Xem kết quả

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

ul:first-of-type {
   font-weight: bold;  
}

P/s: Lấy tất cả element con nằm trong ul đầu tiên.

Ví dụ:

<ul class="para">    
    <li>
        <p>Học lập trình Javasctipt</p>
    </li>
</ul>
<ul class="para">    
    <li>
        <p>Học lập trình JQuery</p>
    </li>
</ul>
<ul class="para">
    <li>Học lập trình PHP</li>
    <li>
        <p>Học lập trình MySQL</p>
    </li>
</ul>
<style type="text/css">
    ul:first-of-type {
       font-weight: bold;  
    }
</style>

Xem kết quả

Compatibility:

  • IE 9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

Tổng kết.

Vậy là hết cám ơn các bạn theo dõi bài viết.

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.