2

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/

Udders
  • 6,914
  • 24
  • 102
  • 194
  • The last `.left` is not the last child of your topmost `div`, so it doesn't match. – BoltClock Dec 21 '11 at 11:25
  • is there a way I could target the last .left and the last .right? – Udders Dec 21 '11 at 11:26
  • Not with CSS because of backtracking limitations, but if you could somehow switch the bottom borders for top borders, and use [this technique](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107) to apply the borders and backgrounds, it might work. – BoltClock Dec 21 '11 at 11:29
  • 1
    If you can use `:last-child`, can't you just use `:nth-last-child`? They have virtually the same level of browser support. http://jsfiddle.net/thirtydot/HJE5h/3/ – thirtydot Dec 21 '11 at 11:41
  • @thirtydot: It should be possible, but it depends somewhat on the structure of the `.left` and `.right` elements. Looks worth a shot though. – BoltClock Dec 21 '11 at 11:44

2 Answers2

6

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/

My Head Hurts
  • 37,315
  • 16
  • 75
  • 117
4

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/

Monica Muranyi
  • 131
  • 4