Hướng dẫn child trong css - con trong css

• 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ứ 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

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

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