結論
順番を数えるときに指定した要素のみを数えるかどうか
それぞれの挙動の違い
例として以下のようなコードを使用します。
<body>
<h1>国民の祝日</h1>
<h2>１月</h2>
<p>元日</p>
<p>成人の日</p>
<h2>２月</h2>
<p>建国記念の日</p>
<p>天皇誕生日</p>
<h2>３月</h2>
<p>春分の日</p>
</body>
ブラウザ表示は以下のようになります。
今回はpタグに対して指定をしていきたいと思います。
nth-child()とnth-of type()共に３番目を指定して色を変えてみます。
p:nth-child(3) {
color: red;
}
p:nth-of-type(3) {
color: blue;
}
結果としてブラウザの表示は以下のようになりました。
nth-childは３番目の要素であるpタグに対してプロパティが適用されています。
これは上から数えて３番目がpタグだったためcolor: red;が適用されて色が赤くなっています。
これを
p:nth-child(1) {
color: red;
}
とすると１番目の要素はh1タグで囲まれているためプロパティは適用されず文字は赤くなりません。
それに対してnth-of-typeはpタグの３番目にプロパティが適用されています。
このことからnth-of-typeは指定した型で順番を数えるという特徴があります。
以上、nth-child()とnth-of type()の違いでした。