nth-childとnth-of-typeの機能と違いと注意点

順番に並んでる子要素に特定のルールでスタイルを適用したいときなどに便利なCSS3セレクタのnth-child。機能のよく似たセレクタにnth-of-typeがあります。違いがわかるとそれぞれに適した使いどころがありますので、その違いと使いどころについて紹介します。

それぞれの違い

nth-childは「親要素の中で何番目」かを見るのに対し、nth-of-typeは「子要素の中の指定typeの中で何番目」かを見るのが大きな違いです。
nth-childがtypeに関わらず子要素全ての中で何番目かを見るのが差異のポイントです。

nth-childの場合

See the Pen BZWBpZ by hoshu_t (@hoshu_t) on CodePen.

サンプルのcssタブをご覧ください。この場合「p:nth-child(5)」で「5行目がpであれば背景を赤に」と指定していることになります。
pタグだけを上から数えると4番めのpタグですが、子要素としては5行目なので上記のスタイルが適用されています。

See the Pen mwWbQw by hoshu_t (@hoshu_t) on CodePen.

同様のコードで「p:nth-child(5)」だけを「span:nth-child(5)」に変更しました。5行目はspanタグではないのでスタイルは適用されません。

nth-of-typeの場合

nth-childの例と同じhtmlに対して「p:nth-of-type(5)」を使っています。これは「5番目のpの背景を赤に」という意味になります。
以下のサンプルでは指定通り、5番めのpタグの背景が赤くなっています。タグの数だけを上から数えると6行目です。

See the Pen RgpbpR by hoshu_t (@hoshu_t) on CodePen.

classを指定した場合の注意点

セレクタにclassを指定した場合の挙動も紹介します。特にnth-of-typeは特殊な挙動をします。

nth-childの場合

「3番目が.txtであれば背景を赤に」という命令になるので、3番目が.txtでない場合、指示が効きません。
逆に3番目が.txtでさえあればタグの種類や数は問いません。

See the Pen JJWYKR by hoshu_t (@hoshu_t) on CodePen.

nth-of-typeの場合

nth-of-typeはclassに指定した場合、子要素の中の自分と同じタグを数えにいきます。「3番目の.txt」ではなく「自分と同じタグの3番目が.txtのとき」に指示が効きます。

See the Pen gRmpVo by hoshu_t (@hoshu_t) on CodePen.

つまり上記サンプルは、nth-of-typeからは下記サンプルのように見えているということです。

See the Pen qjrdeN by hoshu_t (@hoshu_t) on CodePen.

いずれの場合もclassは必要条件でしかなく、セレクタが数えるのは結局タグの数だということです。

意味を理解して正しく利用を

子要素の中に複数のタグが並ぶとき、nth-childで実現したい処理なのか、nth-of-typeで実現したい処理なのか、しっかりと見極めるとそれぞれとても便利です。何を基準に数えているかをポイントに、それぞれを使いこなしてみましょう。