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

Question

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

Я уже знаю: последний ребенок. Но есть ли способ, чтобы выбрать элемент div:

<div id="container">

 <div>a</div>

 <div>b</div>

 <div>SELECT THIS</div> <!-- THIS -->

 <div>c</div>

</div>

Примечание: без jQuery, только с CSS

694 2

html css css3 css-selectors

2 ответов:

Comments

Ничего не найдено.

Frosty Z · Accepted Answer · 2018-02-15 18:18:47

в CSS3 у вас есть:
:nth-last-child(2)
см.:https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

N-й-последний-ребенок Поддержка Браузера:

Chrome 2

Firefox 3.5

Opera 9.5, 10

Safari 3.1, 4

Internet Explorer 9

kapa · Accepted Answer · 2018-07-09 05:28:23

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

The :nth-child CSS3 селектор на самом деле более способен, чем вы когда-либо себе представляли!

например, это позволит выбрать последние 2 элементов #container:
#container :nth-last-child(-n+2) {}
но это только начало прекрасного дружба.

:nth-child Поддержка Браузеров
#container :nth-last-child(-n+2) {
  background-color: cyan;
}
<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div>
 <div>SELECT THIS</div>
</div>