Как я могу выбрать все дочерние элементы, кроме последнего?

Question

Как выбрать все, кроме последнего потомка, используя селекторы CSS3?

Например, получить только последнего ребенка будет div:nth-last-child(1).

Answer 1

Вы можете использовать псевдокласс отрицания :not() против псевдокласса :last-child . Будучи представлен CSS селекторов уровня 3, он не работает в IE8 или ниже:

:not(:last-child) { /* styles */ }

Answer 2

Сделать проще:

Вы можете применить свой стиль ко всем div и повторно инициализировать последний с помощью : last-child :

например в CSS :

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

или SCSS :

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

• легко читается / запоминается
• быстро выполнить
• совместимый с браузером (IE9 +, поскольку он все еще CSS3)

Answer 3

Решение Ника Крейвера работает, но вы также можете использовать это:

:nth-last-child(n+2) { /* Your code here */ }

Крис Койер из CSS Tricks сделал хороший : nth тестер для этого.

Answer 4

Когда выйдет IE9, будет проще. Однако в большинстве случаев вы можете переключиться на проблему, требующую: first-child и стилизовать противоположную сторону элемента (IE7 +).

Answer 5

Использование решения Ника Крейвера с selectivizr допускает кросс-браузерное решение (IE6 +)

Answer 6

чтобы найти элементы из последнего, используйте

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>