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

『セレクタ:nth-last-of-type(n)』で、同じ要素名を持つ後ろから数えたn番目の子要素に適用できます。こちらは一般に『擬似クラス』と呼ばれます。IE8以下では動きません。

『:nth-last-child(n)』との違いは他の要素をカウントするかどうか、というところがあげられます。例えば『p:nth-last-child(2)』と指定した場合、後から数えて2番目の要素がp要素じゃなければ適用されませんが、『p:nth-last-of-type(2)』だと間に別の要素があっても他の要素をカウントせずに2番目のp要素に適用されます。

サンプルコード

style.css

/* 後ろから1番目のp要素（最後のp要素） */
div p:nth-last-of-type(1) { color: red;}

/* 後ろから3番目のp要素 */
div p:nth-last-of-type(3) { color: blue;}

/* 後ろから数えて偶数番目のli要素 */
li:nth-last-of-type(even) { background-color: #f5f5f5;}

/* 後ろから2つのみのimg要素 */
img:nth-last-of-type(-n+2) { opacity: 0.5;}

/* 最後のh2以外のh2要素（最後のみ除く） */
h2:nth-last-of-type(n+2) { border-bottom: 1px solid #ccc;}

ブラウザでの表示結果

div p:nth-last-of-type(1) { color: red;} /* div要素の中の後ろから1番目のp要素を赤字にします。 */
div p:nth-last-of-type(3) { color: blue;} /* div要素の中の後ろから3番目のp要素を青字にします。 */

<div>
	<p>ここは1番目のp要素です。</p>
	<div>ここは1番目のdiv要素です。</div>
	<p>ここは2番目のp要素です。</p>
	<div>ここは2番目のdiv要素です。</div>
	<p>ここは3番目の要素です。</p>
	<div>ここは3番目のdiv要素です。</div>
</div>

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

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

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