最終更新日 2022.04.5
CSS

「nth-of-type」と「nth-child」はどっちを使う？コードに合わせた使い分け

CSSで使う「:nth-of-type」と「:nth-child」の使い分けはされていますか？この2つは疑似クラスと言って特定の要素を指定する際に良く使用します。

個人的にはnth-childばっかり使用しています（笑）。単純にnth-of-typeの存在を後から知ったので使い慣れたnth-childでほぼほぼデザイン調整している状態です。

しかし、記述するHTMLによってはnth-childじゃなくてnth-of-typeで指定する方がわかりやすい事もありますので両方の特性を押さえておきましょう。

目次 [閉じる]

共通の指定方法
nth-of-typeの使い方
nth-childの使い方

共通の指定方法

nth-of-typeとnth-childの記述方法は同じです。

例えばliタグにnth-of-typeを加えるなら「li:nth-of-type(○○)」、nth-childを加えるなら「li:nth-child(○○)」と書きます。「タグ」+「:」+「疑似クラス」+「(○○)」という形ですね。

まずは疑似クラスを追加するタグと疑似クラスを「:(コロン)」で繋げます。そして疑似クラスの後ろには「(○○)」のように括弧を付けて、その中の「○○」部分に具体的な値を記述します。

この括弧の中に入れる値はいくつもありますので一覧でご確認ください。

(odd): 奇数の要素を指定します。【1、3、5、7…】

(even): 偶数の要素を指定します。【2、4、6、8…】

(2): 2つ目の要素を指定します。【2】

(3n): 3の倍数の要素を指定します。【3、6、9、12…】

(3n+1): 3nに1を足した要素を指定します。【1、4、7、10…】

(n+4): 4つ目以降の要素を指定します。【4、5、6、7…】

(-n+4): 先頭から4つ目までの要素を指定します。【1、2、3、4】

ちょっと「n」が絡んでくると難しいんですが簡単なものから使えるようにしてもらえたらなぁと思います。僕は「odd」や「even」はあんまり使ってないですね（笑）。

「4」とか「3n」みたいに具体的な数値と倍数で指定する事が多いです。「n」関連は無理に覚えなくても良いですが「(-n+4)」なんかの指定も実際に使える場面は多いと思います。

上記の「(3n+1)」でなぜ「1」が含まれるのか、と疑問を持たれるかと思いますので、「n」を含む計算式がどうなっているかも紹介します。

「3n」は「3×0=0」、「3×1=3」、「3×2=6」、「3×3=9」、「3×4=12」で【3、6、9、12】。

「3n+1」は「3×0+1=1」、「3×1+1=4」、「3×2+1=7」、「3×3+1=10」で【1、4、7、10】。

「n+4」は「0+4=4」、「1+4=5」、「2+4=6」、「3+4=7」で【4、5、6、7】。

「-n+4」は「-0+4=4」、「-1+4=3」、「-2+4=2」、「-3+4=1」で【4、3、2、1】。

この計算式を見てもらうとわかりますね。「n」の計算は「0」から始まるので「3n+1」のはじめの値は「1」になるという事です。

以上の事を踏まえてもうひとつ応用テクニックをご紹介します。

例えば一覧で紹介した「even」と「-n+4」を同時に適応させたい場合、「li:nth-child(even):nth-child(-n+4)」と繋げてやることも可能です。

ここもそれぞれを繋げるために「:」を使います。そこまで複雑な設定はなかなかしないですが、「こんな事もできるんや～」ってぐらいに思っておいてください。

nth-of-typeの使い方

はじめにnth-of-typeとnth-childの違いを言うと、nth-of-typeは同じ階層の指定したタグのみに有効で、nth-childは同じ階層のすべてのタグに適応されるという事です。

            
                <h2></h2>
                <p>「p:nth-of-type(1)」で指定</p>
                <p>「p:nth-of-type(2)」で指定</p>
                <p>「p:nth-of-type(3)」で指定</p>

上記を例にすると「p:nth-of-type(1)」で指定されるのはh2タグの下のひとつ目のpタグです。同じ階層にあるh2タグは数えられずにpタグの中のみで「()」内の値が選択されます。

しかし、nth-childの場合は同じ階層にあるh2タグも数に入ってしまうので注意しなければいけません。

あとnth-of-typeには「共通の指定方法」で紹介した記述以外にも要素を指定する方法がありますのでご確認ください。

:first-of-type: 最初の要素を指定します。

:last-of-type: 最後の要素を指定します。

:only-of-type: ひとつしかない要素を指定します。

:nth-last-of-type(○○): (○○)の値を最後の要素から指定します。

only-of-typeがわかりづらいと思いますのでもう少し説明すると、下層にpタグがひとつだけあるdivタグとpタグがみっつあるdivタグを見てみましょう。

            
                <div>
                  <p>「p:only-of-type」で指定</p>
                </div>
                <div>
                  <p></p>
                  <p></p>
                  <p></p>
                </div>

そうすると同じ階層にひとつしかないpタグというのは、はじめのdivタグの中にあるpタグなので、ここを指定したければ「only-of-type」を付ければOKです。

さらに「nth-of-type(○○)」では最初の要素から指定するのに対し、「nth-last-of-type(○○)」では最後の要素から指定する事ができます。「(○○)」の値は「共通の指定方法」で紹介したものがすべて使えます。

nth-childの使い方

「nth-of-typeの使い方」でも言いましたが、「nth-child」の指定は同じ階層のすべてのタグに適応されます。

            
                <h2>「p:nth-child(1)」とカウントされる</h2>
                <p>「p:nth-child(2)」で指定</p>
                <p>「p:nth-child(3)」で指定</p>
                <p>「p:nth-child(4)」で指定</p>