CSSで後ろから何番目に指定するには？

Webページのスタイリングを行う際、要素の順番を基準にスタイルを適用したい場合があります。特に、リストの最後から数えて何番目の要素といった指定は、CSSの擬似クラスを使うことで実現できます。

:nth-last-of-type(n) と :nth-last-child(n)

CSSで要素を後ろから指定するには、主に以下の2つの擬似クラスを使用します。

擬似クラス	説明
`:nth-last-of-type(n)`	親要素内の同じ型の要素の中で、後ろからn番目の要素を選択します。
`:nth-last-child(n)`	親要素内の全ての子要素の中で、後ろからn番目の要素を選択します。

これらの擬似クラスでは、"n" の部分に数値を指定することで、後ろから何番目の要素を選択するかを指定できます。例えば、:nth-last-of-type(2) は、後ろから2番目の要素を選択します。

以下のHTMLコードでは、リストの最後のリストアイテムの文字色を赤色に設定しています。


<ul>
  <li>リストアイテム1</li>
  <li>リストアイテム2</li>
  <li>リストアイテム3</li>
</ul>

<style>
  li:nth-last-of-type(1) {
    color: red;
  }
</style>

以下のHTMLコードでは、段落要素の中で、後ろから2番目の段落要素の背景色を黄色に設定しています。


<div>
  <p>段落1</p>
  <p>段落2</p>
  <span>スパン</span>
  <p>段落3</p>
</div>

<style>
  p:nth-last-child(2) {
    background-color: yellow;
  }
</style>

:nth-last-of-type(n) は、同じ型の要素の中で順番を判断しますが、:nth-last-child(n) は、要素の種類に関係なく順番を判断します。
"n" には、数値だけでなく、"even" (偶数) や "odd" (奇数) などのキーワードも指定できます。

A1. :nth-last-of-type(n) は、親要素内の同じ型の要素の中で順番を判断しますが、:nth-last-child(n) は、要素の種類に関係なく順番を判断します。

A2. "n" には、数値だけでなく、"even" (偶数) や "odd" (奇数)、"an + b" (等差数列) などのキーワードも指定できます。

A3. :nth-last-of-type(3) を使用します。

その他の参考記事:jquery nth child