Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

  1. トップページ
  2. CSSプロパティ辞典
  3. 【CSSセレクタ】E:nth-last-child(n)

【CSSセレクタ】E:nth-last-child(n)

セレクタ:nth-last-child(n)』は、最後から数えてn番目の子要素に適用します。『:first-child:last-child』や『:nth-child(1)』と指定した場合と等価ですが、詳細度(優先度)はそれらより低く設定されます。IE8以下では動きません。

サンプルコード
div p:nth-last-child(1) { color: red;} /* div要素の中の最後から1番目のp要素を赤字にします。 */
div.hoge :nth-last-child(2) { color: blue;} /* 『hoge』というクラス名を持つdiv要素の中の最後から2番目要素を青字にします。 */
ブラウザでの表示結果
div p:nth-last-child(1) { color: red;} /* div要素の中の最後から1番目のp要素を赤字にします。 */
div.hoge :nth-last-child(2) { color: blue;} /* 『hoge』というクラス名を持つdiv要素の中の最後から2番目要素を青字にします。 */
div.hoge1 :nth-last-child(3) { color: blue;} /* 『hoge1』というクラス名を持つdiv要素の中の最後から3番目要素がないので適用されません。 */

<div>
	<p>ここは1番目のp要素です。</p>
	<p>ここは2番目のp要素です。</p>
</div>
<div class="hoge">
	<div>ここは1番目のdiv要素です。</div>
	<div>ここは2番目のdiv要素です。</div>
</div>
<div class="hoge1">
	<div>ここは1番目のdiv要素です。</div>
	<div>ここは2番目のdiv要素です。</div>
</div>

注意点としてid名やクラス名、属性などからの特定と『:only-child』を併用した場合、まずその要素が唯一の存在であるかどうかの特定を行った後になおかつ指定された要素名、id名、クラス名、属性などを持っていた場合に適用する、といった動きになります。例えば、『p.hoge:only-child』と指定した場合、子要素がp要素しか存在しておらず、さらに『hoge』というクラス名を持っていた場合に限りデザインが当たります。

nth系の引数に『n』を使った場合の考察

:nth-child』、『:nth-last-child』、『:nth-of-type』、『:nth-last-of-type』の引数の値に『n』を使った場合の『n』には『0を含む自然数の連番』が入っているものとして計算されます。数学における偶数を『2n』、奇数を『2n+1』と表す表記方法と同じです。要素数は『1』から数え始めますが、『n』は『0』から数え始めますのでご注意ください。

以下参考例です。『2n』と表したときは以下のような形になります。

  • 『n = 0』=>『2 * 0』 -> 0番目の要素に該当
  • 『n = 1』=>『2 * 1』 -> 2番目の要素に該当
  • 『n = 2』=>『2 * 2』 -> 4番目の要素に該当
  • 『n = 3』=>『2 * 3』 -> 6番目の要素に該当
  • 『n = 4』=>『2 * 4』 -> 8番目の要素に該当
  • 以下省略...

『2n+1』と指定した場合は以下になります。

  • 『n = 0』=>『2 * 0 + 1』 -> 1番目の要素に該当
  • 『n = 1』=>『2 * 1 + 1』 -> 3番目の要素に該当
  • 『n = 2』=>『2 * 2 + 1』 -> 5番目の要素に該当
  • 『n = 3』=>『2 * 3 + 1』 -> 7番目の要素に該当
  • 『n = 4』=>『2 * 4 + 1』 -> 9番目の要素に該当
  • 以下省略...

『6n-3』と指定した場合は以下になります。

  • 『n = 0』=>『6 * 0 - 3』 -> -3番目の要素に該当
  • 『n = 1』=>『6 * 1 - 3』 -> 3番目の要素に該当
  • 『n = 2』=>『6 * 2 - 3』 -> 9番目の要素に該当
  • 『n = 3』=>『6 * 3 - 3』 -> 15番目の要素に該当
  • 『n = 4』=>『6 * 4 - 3』 -> 21番目の要素に該当
  • 以下省略...

『-2n+3』と指定した場合は以下になります。

  • 『n = 0』=>『-2 * 0 + 3』 -> 3番目の要素に該当
  • 『n = 1』=>『-2 * 1 + 3』 -> 1番目の要素に該当
  • 『n = 2』=>『-2 * 2 + 3』 -> -1番目の要素に該当
  • 『n = 3』=>『-2 * 3 + 3』 -> -3番目の要素に該当
  • 『n = 4』=>『-2 * 4 + 3』 -> -5番目の要素に該当
  • 以下省略...

『n+3』と指定した場合は以下になります。

  • 『n = 0』=>『1 * 0 + 3』 -> 3番目の要素に該当
  • 『n = 1』=>『1 * 1 + 3』 -> 4番目の要素に該当
  • 『n = 2』=>『1 * 2 + 3』 -> 5番目の要素に該当
  • 『n = 3』=>『1 * 3 + 3』 -> 6番目の要素に該当
  • 『n = 4』=>『1 * 4 + 3』 -> 7番目の要素に該当
  • 以下省略...

要素数は『1』から数え始めるため、『0』番目以下の場合は無視されます。

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。