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

I have a grid of news articles and I wanting it so the last two articles in the grid do not have a bottom border, however my css last-child selector does not seem to be working, the last article with the class right has the border taken off, however the last article with the class left does not, is there a reason for this?

Here is a fiddle of my code and problem.

http://jsfiddle.net/Udders/HJE5h/

asked Dec 21, 2011 at 11:22

5

As mentioned by @BoltClock above, swap the broder-bottom for border-top and target the first-child instead. SOme older browsers do not support last-child:

JSFiddle: http://jsfiddle.net/HJE5h/2/

Edit

Ok, as @BoltClock mentions in the comment below, the problem is not entirely with the last-child issue. However, if you do use border-top as suggested above and then target the next select element that directly follows the first-child, you can remove border-top from the first two articles.

section:first-child .snippet, section:first-child + section .snippet {
    background:none;
    border-top:none;
}

JSFiddle: http://jsfiddle.net/HJE5h/5/

answered Dec 21, 2011 at 11:37

My Head HurtsMy Head Hurts

37.1k16 gold badges73 silver badges114 bronze badges

1

You can achieve that by using nth-last-child(n) pseudo class. It begins at the end of the collection and this way you can specify the last two elements without knowing the size of the collection. Please try this selector in your css code:

.grid_9:nth-last-child(1) .snippet, .grid_9:nth-last-child(2) .snippet {
    background: none;
    border-bottom: none;
}

This is a good reference for useful css selectors http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

answered Dec 21, 2011 at 11:53

I want to select the last child of elements with a specific attribute.

You can’t…with CSS

Pseudo-selectors like :last-child or nth-child or nth-of-type only select based on elements not classes or attributes.

Either something is the last-child or it isn’t. If it’s the last element in a parent it will be selected.

Remember that CSS reads ‘right to left’

So, in your case, it’s testing for it to meet all the conditions.

It looks to see if something is the last child then if it has the attribute and class. If it doesn’t have all three…in that order…it fails.

The :first-child is working

My guess it that this is just by chance….the element just happens to be the first element in the parent. You can test this for yourself by adding an extra element in front, temporarily, to your code.

JQuery can do this selector for you though.

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