CSS で最後から 2 番目の要素を選択するにはどうすればよいですか?

最後から 2 番目の要素の CSS セレクター

CSS を使用する場合、親要素内の位置に基づいて要素を選択するのが一般的です。 :last-child は最後の要素を選択するための一般的な選択肢ですが、最後の要素の直前の要素を選択する方法はありますか?

これを実現するには、:nth-last-child セレクターを利用できます。 CSS3で。その仕組みは次のとおりです。

<code class="css">:nth-last-child(2) {
  /* Styling for the second last child */
}</code>

この例では、:nth-last-child(2) セレクターは、親要素の末尾から 2 番目の要素と一致します。指定された HTML では、次の要素が選択されます:

<code class="html"><div>SELECT THIS</div></code>

適切なセレクターが適用された HTML の更新バージョンは次のとおりです:

<code class="html"><div id="container">
  <div>a</div>
  <div>b</div>
  <div class="second-last">SELECT THIS</div>
  <div>c</div>
</div></code>

<code class="css">#container .second-last {
  /* Styling for the second last child of #container */
  background-color: lightblue;
}</code>

サポートされているブラウザー:nth-last-child には以下が含まれます:

• Chrome 2
• Firefox 3.5
• Opera 9.5 , 10
• Safari 3.1 , 4
• Internet Explorer 9

以上がCSS で最後から 2 番目の要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。