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


371

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

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

Ответы:


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

Решение Ника Крейвера дало мне то, что мне было нужно, но сделать это явно для тех, кто использует 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 */
    },
  },
};

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

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

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

  • Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
    Licensed under cc by-sa 3.0 with attribution required.