CSS :nth-last-child 選択器：最後の2番目の要素を簡単に選択
この記事では、CSS の :nth-last-child 選択器、特にリストやテーブルの最後から2番目の要素を選択する方法について詳しく解説し、実際の使用例を紹介します。
1. :nth-last-child 選択器の概要
- :nth-last-child(n) 選択器は、親要素内の **最後からn番目** の子要素を選択します。
- :nth-child() 選択器とは異なり、:nth-last-child() は最後の要素から逆順にカウントします。
2. 最後から2番目の要素を選択する
- :nth-last-child(2) を使用すると、最後から2番目の要素を正確に選択できます。
- 例：`li:nth-last-child(2)` は、リスト内の最後から2番目の `
- ` 要素を選択します。
3. 実際の使用例
- **交互のスタイル:** リスト内の奇数行と偶数行に異なる背景色を設定します。リスト項目の数が動的に変化しても、スタイルは一貫性を保ちます。
- **ハイライト表示:** リストの最後から2番目の項目をハイライト表示します。たとえば、ランキングで2位の項目を強調表示します。
- **動的なコンテンツスタイルの制御:** コンテンツがJavaScriptによって動的に生成される場合でも、最後から2番目の要素のスタイルを正確に制御できます。
4. コード例
/* リストの最後から2番目の要素に赤い背景を設定する */
li:nth-last-child(2) {
background-color: red;
}
5. ブラウザの互換性
- :nth-last-child() 選択器は、主要なブラウザでサポートされているため、優れたブラウザ互換性を備えています。
| ブラウザ | バージョン |
|---|---|
| Chrome | 4+ |
| Firefox | 3.5+ |
| Safari | 3.1+ |
| Opera | 9.5+ |
| IE | 9+ |
出典: Can I use... CSS :nth-last-child
6. まとめ
:nth-last-child(2) 選択器は、最後から2番目の要素を選択して特定のスタイルを適用するためのシンプルかつ強力な方法を提供します。このセレクターは、リスト、テーブルなどの構造化データを処理する場合に特に便利で、開発者はさまざまな動的なスタイル効果を簡単に実現できます。
質問と回答
-
質問: :nth-last-child(2) 選択器は、どのような場合に役立ちますか？
回答: このセレクターは、リストやテーブルの最後から2番目の要素に特定のスタイルを適用する場合に役立ちます。たとえば、ランキングで2位の項目を強調表示したり、リストの最後から2番目の項目に異なる背景色を設定したりできます。 -
質問: :nth-last-child(2) 選択器と :nth-child(n) 選択器の違いは何ですか？
回答: :nth-last-child(n) 選択器は、要素の最後からカウントしますが、:nth-child(n) 選択器は、要素の先頭からカウントします。 -
質問: :nth-last-child(2) 選択器は、すべてのブラウザでサポートされていますか？
回答: はい、:nth-last-child(2) 選択器は、すべての主要なブラウザでサポートされています。
その他の参考記事:jquery last child