css последний ребенок не работает

Question

У меня есть сетка новостных статей, и я хочу, чтобы у последних двух статей в сетке не было нижней границы, однако мой селектор css last-child не работает, последняя статья с правом класса сняла ли граница, но последняя статья с оставленным классом не имеет, есть ли причина для этого?

Вот скрипка моего кода и проблемы.

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

Answer 1

Как упомянуто выше @BoltClock, поменяйте broder-bottom на border-top и вместо этого выберите цель first-child. Некоторые старые браузеры не поддерживают last-child:

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

Редактировать

Хорошо, как @BoltClock упоминает в комментарии ниже, проблема не совсем в проблеме last-child. Однако, если вы используете border-top, как предложено выше, а затем нацеливаетесь на следующий элемент select, который следует непосредственно за first-child, вы можете удалить border-top из первых двух статей.

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

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

Answer 2

Этого можно добиться с помощью псевдокласса nth-last-child (n). Он начинается в конце коллекции, и таким образом вы можете указать два последних элемента, не зная размера коллекции. Пожалуйста, попробуйте этот селектор в вашем коде CSS:

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

Это хороший справочник для полезных селекторов CSS http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/