web-dev-qa-db-ja.com

cssで最後から2番目の要素を選択します

私はすでに：last-childを知っています。しかし、divを選択する方法はありますか？

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

注：jQueryなし、CSSのみ

htmlcsscss3css-selectors
112
dynamic

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
224
Frosty Z

注：OPが最後の2つを選択する必要があるとコメントで述べているため、この回答を投稿しましたelements、最後から2番目の要素だけではありません。

:nth-child CSS3セレクターは、実際にはあなたが想像したよりも優れています！

たとえば、これは#containerの最後の2つの要素を選択します。

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

しかし、これは美しい友情の始まりに過ぎません。

#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>
48
kapa