CSSで最後から2番目の要素を選択

135

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

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

注：jQueryなし、CSSのみ

html css css-selectors

— 動的
ソース

なぜ最後から2番目の子供が重要なのかについては、いくつかの論理がありますか？

— David Tang

はい、私はいくつかのスタイルを適用するために最後と最後の両方を選択する必要があります

— 動的な

なぜ最後の2番目のdivにクラスを配置できないのですか

— Daveo

「なぜ最後の2番目のdivにクラスを置くことができないのですか」：生成されているスタイルコンテンツにアクセスして、最後の2番目の項目にクラスを追加する（簡単な）アクセス権がない場合はどうでしょうか。

— Henrik

回答:

271

CSS3には次のものがあります。

:nth-last-child(2)

nth-last-childブラウザサポート：

Chrome 2

Firefox 3.5

Opera 9.5、10

Safari 3.1、4

Internet Explorer 9

— フロスティZ
ソース

これは、選択しようとしているdivにクラスをアタッチできない場合を除いて、おそらくこの方法です。Frostyが述べたように、CSS3は古いブラウザやIEではサポートされていません。ブラウザー間の計算能力を懸念している場合は、jqueryの方がはるかに優れたオプションです。

— Thomas

それはリンクされた記事からのコピー/貼り付けでした...編集された答え、ありがとう。

— Frosty Z

cssのソリューション：#container>：nth-last-child（2）{background：red;}このcodepenをチェックして、ライブで確認してください：codepen.io/marc_dahan/pen/JyxObz

— marcdahan

古いIEをサポートする必要がないので、この答えは完全に機能します。正直なところ、人々がまだIE 8以下を使用している場合、それらはきれいなものを持つに値しません。

— Stender

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

:nth-childCSS3セレクタは、実際にあなたが想像以上に可能です！

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

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

— カパ
ソース

いいですね、私の答えは最後の子から1を引いたものだけを選択します。+ 'd

— rsplak 2011年