Выберите второй последний элемент с помощью css

135

Я уже знаю о: last-child. Но есть ли способ выбрать div:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

ПРИМЕЧАНИЕ: без jQuery, только с CSS

динамический
источник
Несомненно, есть логика относительно того, почему важен второй, последний ребенок?
Дэвид Тан,
да, мне нужно выбрать и последний, и второй последний для применения некоторых стилей
динамический
почему ты не можешь просто поставить класс на втором последнем дивизионе
Давео
3
«почему вы не можете просто поместить класс во второй последний div»: возможно, если вы получите стиль создаваемого контента, в котором у вас нет (легкого) доступа для добавления класса ко второму последнему элементу?
Хенрик

Ответы:

271

В CSS3 у вас есть:

:nth-last-child(2)

См. Https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

Поддержка браузера nth-last-child :

  • Chrome 2
  • Firefox 3.5
  • Opera 9.5, 10
  • Safari 3.1, 4
  • Internet Explorer 9
Морозный Z
источник
1
Вероятно, это правильный путь, если вы не можете прикрепить класс к div, который вы пытаетесь выбрать. Как уже упоминал Фрости, CSS3 не поддерживается старыми браузерами или IE. Jquery - намного лучший вариант, если вас беспокоит кроссбраузерность.
Thomas
Это была копия / вставка из связанной статьи ... Отредактированный ответ, спасибо.
Frosty Z
1
решение в css: #container>: nth-last-child (2) {background: red;} Пожалуйста, проверьте этот код, чтобы увидеть его в реальном времени: codepen.io/marc_dahan/pen/JyxObz
marcdahan 01
Теперь, когда нам не нужно поддерживать старый IE, этот ответ будет работать отлично. Честно говоря, если люди до сих пор используют IE 8 и ниже, они не заслуживают красивых вещей.
Stender
59

Примечание: опубликовал этот ответ, потому что OP позже заявил в комментариях, что ему нужно выбрать последние два элемента , а не только предпоследний.


:nth-childСелектор CSS3, на самом деле более способным , чем Вы когда - нибудь!

Например, это выберет последние 2 элемента #container:

#container :nth-last-child(-n+2) {}

Но это только начало красивой дружбы.

капа
источник
Хороший, в моем ответе выбирается только последний ребенок минус 1. Не знал об этом. + 'd
rsplak