Hướng dẫn not last-child trong css

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

    
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

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

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

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

    
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

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

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