- Trang chủ
- Tham khảo
- CSS
- CSS3
- :nth-last-child(n)
Định nghĩa và sử dụng
- ":nth-last-child(n)" chọn thành phần thứ "n" trong thành phần cha, gốc tính được tính từ thành phần cuối cùng trở lại.
- Thứ tự "n" được tính cho tất cả các thành phần cùng cấp.
- Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
- Giá trị "n" có thể là số, keyword hay công thức.
Cấu trúc
:nth-last-child(n) { property: value; }
Ví dụ
HTML viết:
<html> <head></head> <body> <div> <p>Thành phần thứ nhất</p> <p>Thành phần thứ 2</p> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <div> <h4>Thành phần thứ nhất</h4> <div>Thành phần thứ 2</div> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <div> <h4>Thành phần thứ nhất</h4> <ul> <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li> <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li> </ul> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <p>Thành phần độc lập thứ nhất</p> <p>Thành phần độc lập thứ 2</p> <p>Thành phần độc lập thứ 3</p> <p>Thành phần độc lập thứ 4</p> <p>Thành phần độc lập thứ 5</p> <p>Thành phần độc lập thứ 6</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần độc lập thứ nhất
Thành phần độc lập thứ 2
Thành phần độc lập thứ 3
Thành phần độc lập thứ 4
Thành phần độc lập thứ 5
Thành phần độc lập thứ 6
CSS viết:
p:nth-last-child(3){ color: blue; }
Hiển thị trình duyệt khi đã có css:
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần độc lập thứ nhất
Thành phần độc lập thứ 2
Thành phần độc lập thứ 3
Thành phần độc lập thứ 4
Thành phần độc lập thứ 5
Thành phần độc lập thứ 6
Ta thấy những thành phần <p> ở vị trí thứ 3 tính từ thành phần cuối có thành phần cha đều đã được chọn.
Trình duyệt hỗ trợ
":nth-last-child(n)" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.
- Trang chủ
- Tham khảo
- CSS
- CSS3
- :last-child
Định nghĩa và sử dụng
- ":last-child" chọn thành phần cuối cùng của thành phần cha.
- Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
Cấu trúc
:last-child { property: value; }
Ví dụ
HTML viết:
<html> <head></head> <body> <div> <p>Thành phần thứ nhất</p> <p>Thành phần thứ 2</p> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <div> <h4>Thành phần thứ nhất</h4> <div>Thành phần thứ 2</div> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <div> <h4>Thành phần thứ nhất</h4> <ul> <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li> <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li> </ul> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <p>Thành phần độc lập thứ nhất</p> <p>Thành phần độc lập thứ 2</p> <p>Thành phần độc lập thứ 3</p> <p>Thành phần độc lập thứ 4</p> <p>Thành phần độc lập thứ 5</p> <p>Thành phần độc lập thứ 6</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần độc lập thứ nhất
Thành phần độc lập thứ 2
Thành phần độc lập thứ 3
Thành phần độc lập thứ 4
Thành phần độc lập thứ 5
Thành phần độc lập thứ 6
CSS viết:
p:last-child{ color: blue; }
Hiển thị trình duyệt khi đã có css:
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
Thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần thứ nhất
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
- ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
Thành phần thứ 3
Thành phần thứ 4
Thành phần thứ 5
Thành phần thứ 6
Thành phần độc lập thứ nhất
Thành phần độc lập thứ 2
Thành phần độc lập thứ 3
Thành phần độc lập thứ 4
Thành phần độc lập thứ 5
Thành phần độc lập thứ 6
Ta thấy những thành phần <p> ở vị trí cuối cùng có thành phần cha đều đã được chọn.
Trình duyệt hỗ trợ
":last-child" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.