使えるのにわかりにくい擬似要素、
nth-of-typeについてまとめてみた！

こんにちは、asです
CSS3の便利な擬似要素、nth-of-typeですが、いつもいざという時にこんがらがってしまうので、こちらに用法をまとめておきたいと思います。
ややこしいnth-child(n)との違いもみていきます！
カンペとしてお使いください（笑）

nth-of-type(n)とは

擬似要素の1種で、その種類の要素のn番目にスタイルを適用する際に使用します。
要素:nth-of-type(n)のnに希望の数値を当てはめて指定します。

例えば次のリストで、3番目の水曜日だけ文字色を水色にしたい場合は、この様に書きます。

<ul>
<li>月曜日</li>
<li>火曜日</li>
<li>水曜日</li>
<li>木曜日</li>
<li>金曜日</li>
</ul>

ul li:nth-of-type(3){color: #00ADFF;}

↓実際の表示はこちら。水曜日だけ水色になりました！

See the Pen
nth-of-type-ex1 by hapilog (@codehapilog)
on CodePen.

実際の用法

nth-of-typeが便利なのはここから(^^)！
n番目の要素だけではなく、複数の要素をまとめて指定できます♪
class名など不要で、たった1行cssに追加するだけで、偶数行にのみ背景色をつけた表なども簡単にできてしまいます！

次のtableは、基本の背景色がグレーで、偶数行が水色の背景色、最初の３行が青の太字になるはずです。

<table>
<tr><th>1</th><td>1行目で奇数の行です。</td></tr>	
<tr><th>2</th><td>2行目で偶数の行です。</td></tr>	
<tr><th>3</th><td>3行目で奇数の行です。</td></tr>	
<tr><th>4</th><td>4行目で偶数の行です。</td></tr>	
<tr><th>5</th><td>5行目で奇数の行です。</td></tr>	
<tr><th>6</th><td>6行目で偶数の行です。</td></tr>	
<tr><th>7</th><td>7行目で奇数の行です。</td></tr>	
</table>

table tr{background-color: #efefef;}
table tr:nth-of-type(even){background-color: #c2ebf1;}
table tr:nth-of-type(-n+3){color:#477df9;font-weight: bold;}

↓実際の表示はこちら↓

See the Pen
nth-of-type-ex2 by hapilog (@codehapilog)
on CodePen.

こっちもおすすめ：類似の擬似要素たち

ちなみにnth-of-typeの仲間には下記があります。
これらもかなり便利です♪

nth-childとの違い

それでは、ややこしいnth-childの違いを比べていきたいと思います！

nth-of-type(n) … 同じ種類の子要素のn番目にスタイルを適用。
nth-child(n) … 要素の種類に関係なく、親要素のn番目の子要素にスタイルを適用。

？？？？？？ て感じですよね（笑）

詳しくみていきましょう！
この様なソースがあったとします。

<div class="box01">
	<h1>親要素の1番目の子要素かつh1タグ</h1>
	<p>親要素の2番目の子要素かつpタグ</p>
	<p>親要素の3番目の子要素かつpタグ</p>
	<p>親要素の4番目の子要素かつpタグ</p>
</div>

それぞれpタグに以下の様に設定します。

div.box01 p:nth-of-type(2){color: red;}
div.box01 p:nth-child(2){color: blue;}

そうすると結果は、この様になります。

See the Pen nth-of-type-ex3 by hapilog (@codehapilog) on CodePen.

nth-of-typeは、同じ種類の子要素であるpタグだけを数えます。
p:nth-of-type(2){color: red;}ですと、<div>の中の<p>タグを上から数え、2番目に該当する”親要素の3番目の子要素かつpタグ”にスタイル（赤字）が適用されます。

一方、nth-childは、子要素の種類に関係なく数えます。
p:nth-child(2){color: blue;}ですと、<div>の中の子要素を単純に上から数え、2番目に該当する”親要素の2番目の子要素かつpタグ”にスタイル（青地）が適用されるわけです。

では、上のソースで2番目が<p>タグじゃなかった場合はどうなるでしょうか？

<div class="box02">
	<h1>親要素の1番目の子要素かつh1タグ</h1>
	<h2>親要素の2番目の子要素かつh2タグ</h2>
	<p>親要素の3番目の子要素かつpタグ</p>
	<p>親要素の4番目の子要素かつpタグ</p>
</div>

div.box02 p:nth-child(2){color: blue;}

See the Pen nth-of-type-ex4 by hapilog (@codehapilog) on CodePen.

そう、この場合は何も該当がないとみなされます！
つまり、nth-childの場合は、親要素（div）の中の子要素のn番目で、その子要素が指定の要素(p)だった場合にのみ適用されるのです。
わかりにくい。。。。
直感的にはnth-of-typeの方が使いやすいんじゃないかな、とは思います、ハイ。

ちなみに。

擬似要素は、英語だとPseudo-elementsと呼びます。
誰もが使う、ChromeのDeveloper Toolsも英語表記だけなので、よく目にすると思います。
このPseudo、そのまま擬似っていう意味なのですが、なんて読むかご存知でしょうか？
先日たまたま調べてみたのですが、Google先生によると[ˈso͞odō]だそうで。

スゥードォー？
pは発音しないのですねー！知りませんでした！一つ賢くなりました。
といっても私は、なぜかプエスド・エレメント、と読んでいたのですが（笑）
全然違う上に、なぜスペイン語（笑）