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

371

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

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

css-selectors css

690

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

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

— Ник Крейвер
источник

это используется как есть? Без чего-либо до первой толстой кишки?

— Джонни, почему

Вы добавили бы это к своему обычному базовому селектору ( divв примере с OP)

— Даллас

2

Для тех, кто использует SASS, вы можете использовать &:not(:last-child) { /* styles * }внутри элемента, который вы хотите повлиять.

— Мартин Джеймс

100

Сделай это проще:

Вы можете применить свой стиль ко всем элементам 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)

— Себастьян Хорин
источник

6

По крайней мере, для меня это неприятный запах кода. Вы сознательно применяете правило css к элементу, который вам не нужен, только для того, чтобы затем попытаться создать другой слой, чтобы отменить его. Для меня это плохой запах кода. Я боюсь, что такого рода кодирование CSS может привести к тому, что поддерживать CSS все труднее и труднее. Другими словами, вы создаете код спагетти css.

— Александр Берд

1

это также может сработать, но проблема в том, что когда у вас много стилей CSS, таких как (рамка, цвет, размер шрифта и т. д.), вам нужно будет снова инициализировать стиль CSS для: last-child. Таким образом, подходящее решение использует: not (: last-child)

— davecar21

33

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

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

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

— Робин Б
источник

У Mozilla есть хорошее определение : nth-last-child

— Clint Pachl

1

Некоторые люди говорят, что :notпсевдо очень дорого. Так что было бы неплохо попытаться избежать этого, где это возможно.

— Нейротрансмиттер

22

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

— Николас Уилсон
источник

10

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

— Дельфи
источник

1

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

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

— Авинаш Малхотра
источник

1

Решение Ника Крейвера дало мне то, что мне было нужно, но сделать это явно для тех, кто использует CSS-in-JS:

const styles = {
  yourClass: {
    /* Styles for all elements with this class */
    '&:not(:last-child)': {
      /* Styles for all EXCEPT the last element with this class */
    },
  },
};

— maddRobot
источник

1

.nav-menu li:not(:last-child){
    // write some style here
}

этот код должен применять стиль ко всем

кроме последнего ребенка

— RyanGonzalezUSA
источник