コーディング

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

2017.06.20

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で実現したい処理なのか、しっかりと見極めるとそれぞれとても便利です。何を基準に数えているかをポイントに、それぞれを使いこなしてみましょう。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。