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

Question

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

200

Как выбрать все, кроме последнего, с помощью селекторов CSS3?

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

RyanScottLewis 04 апр. 2010, в 04:51

Источник

Теги:

css

css3

css-selectors

6 ответов

54

Сделайте это простым:

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

Sebastien Horin 17 янв. 2015, в 00:08

7

Это достаточно хорошее, прагматичное решение и должно быть больше голосов IMO!
micapam 20 окт. 2015, в 23:09
4

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

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

Показать ещё 1 комментарий

22

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

Nicholas Wilson 14 апр. 2010, в 17:03

17

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

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

Крис Койер из CSS Tricks сделал приятный : nth tester для этого.

Robin B 16 апр. 2014, в 10:04

4

Этот ответ требует редактирования: вы должны будете использовать :nth-last-child(n+2) , а не n+1 . Пример: jsbin.com/xayed/2/edit
supertrue 09 июль 2014, в 02:42
1

Спасибо @supertrue, n+2 правильно. Я только что реализовал это. Мне нравится это решение лучше, чем селектор :not(:last-child) .
Clint Pachl 13 окт. 2014, в 11:55
0

У Mozilla есть хорошее определение : nth-last-child
Clint Pachl 04 май 2015, в 23:42
0

Очень хороший маршрут! И спасибо, что связались с Койером: nth тестер, не видел этого!
Joel Farris 29 июль 2015, в 05:59
0

Элегантный! ...........
Hrvoje Golcic 10 авг. 2017, в 09:40
1

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

Показать ещё 4 комментария

9

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

delphi 07 фев. 2011, в 01:58

0

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

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

Avinash Malhotra 23 март 2016, в 09:54

Ещё вопросы

Это достаточно хорошее, прагматичное решение и должно быть больше голосов IMO!
По крайней мере, для меня это неприятный запах кода. Вы сознательно применяете правило css к элементу, который вам не нужен, только для того, чтобы затем попытаться создать другой слой, чтобы отменить его. Для меня это плохой запах кода. Я боюсь, что такого рода кодирование CSS может привести к тому, что поддерживать CSS все труднее и труднее. Другими словами, вы создаете код спагетти css.
это также может сработать, но проблема в том, что когда у вас много стилей CSS, таких как (рамка, цвет, размер шрифта и т. д.), вам нужно будет снова инициализировать стиль CSS для: last-child. Поэтому подходящее решение использует: not (: last-child)
Этот ответ требует редактирования: вы должны будете использовать :nth-last-child(n+2) , а не n+1 . Пример: jsbin.com/xayed/2/edit
Спасибо @supertrue, n+2 правильно. Я только что реализовал это. Мне нравится это решение лучше, чем селектор :not(:last-child) .
У Mozilla есть хорошее определение : nth-last-child
Очень хороший маршрут! И спасибо, что связались с Койером: nth тестер, не видел этого!
Некоторые люди говорят, что :not псевдо очень дорого. Так что было бы неплохо попытаться избежать этого, где это возможно.

Nick Craver · Accepted Answer · 2010-04-04T05-59-00.000Z

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

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