- Trang chủ
- Tham khảo
- CSS
- CSS3
- :nth-child[n]
Định nghĩa và sử dụng
- ":nth-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 đầu tiên trở đ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-child[n] { property: value; }
Ví dụ
HTML viết:
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
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ứ 2Thà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
Hiển thị trình duyệt khi chưa có CSS:
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
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
- Thành phần thứ 2
- 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
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
p:nth-child[3]{ color: blue; }
CSS viết:
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
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
- Thành phần thứ 2
- 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
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
CSS viết:
Hiển thị trình duyệt khi đã có css:
- Trình duyệt hỗ trợ
- ":only-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.
- Trang chủ
- CSS3
- :only-child
Tham khảo
- CSS
- Định nghĩa và sử dụng
Thành phần con duy nhất không chứa thành phần con khác có thể là:
Ghi chú: Màu xanh là màu được chọn. Màu xanh là màu được chọn.
Cấu trúc
:only-child { property: value; }
Ví dụ
HTML viết:
p tự do duy nhất
p duy nhất của li
div duy nhất của lip duy nhất của li, không chứa thành phần khác
p đầu tiên của div
p thứ 2 của div
p đầu tiên của li
p cuối cùng của li
p thứ 3 của div
p cuối cùng của div
Hiển thị trình duyệt khi chưa có CSS:
p tự do duy nhất
p duy nhất của li
div duy nhất của li
p duy nhất của li, không chứa thành phần khác
p đầu tiên của div
p thứ 2 của div
p đầu tiên của li
p cuối cùng của li
p thứ 3 của div
p cuối cùng của div
CSS viết:
p:only-child{ color: blue; }
Hiển thị trình duyệt khi đã có css:
p tự do duy nhất
p duy nhất của li
div duy nhất của li
p duy nhất của li, không chứa thành phần khác
p đầu tiên của div
p thứ 2 của div
p đầu tiên của li
p cuối cùng của li
p thứ 3 của div
p cuối cùng của div
CSS viết:
Hiển thị trình duyệt khi đã có css:
Ta thấy những thành phần được chọn đều là thành phần duy nhất có trong thành phần cha, thành phần cha không chứa thành phần khác ngoài nó.