• 最終更新日
  • 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の記述方法は同じです。

例えば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は同じ階層のすべてのタグに適応されるという事です。

            
  1. <h2></h2>
  2. <p>「p:nth-of-type(1)」で指定</p>
  3. <p>「p:nth-of-type(2)」で指定</p>
  4. <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タグを見てみましょう。

            
  1. <div>
  2.   <p>「p:only-of-type」で指定</p>
  3. </div>
  4. <div>
  5.   <p></p>
  6.   <p></p>
  7.   <p></p>
  8. </div>

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

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

nth-childの使い方

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

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

nth-childの場合、「p:nth-child(1)」でカウントされるのはh2タグです。h2タグのすぐ下のpタグを指定したければ「p:nth-child(2)」としなければいけません。

ただ「nth-child(1)」の指定はpタグにおこなっていますので、h2タグにデザインが施される事はありません。単純に1つ目のpタグにデザインが反映されないだけです。

僕もこの指定ミスをよくやってました(笑)。「なんでや~!」ってモヤモヤしてましたけどnth-of-typeの存在を知ってスッキリです。

あとはnth-childにもnth-of-typeのように形を変えた記述方法があるので紹介します。

:first-child

最初の要素を指定します。

:last-child

最後の要素を指定します。

:only-child

ひとつしかない要素を指定します。

:nth-last-child(○○)

(○○)の値を最後の要素から指定します。

形は違いますけど記述方法はnth-of-typeもnth-childも同じです。nth-childも「nth-last-child(○○)」の形で最後の要素から指定する事ができます。

という事で僕と同じようにモヤモヤしていた方はこれで解決したかと思います(笑)。

nth-of-typeとnth-childの指定は単純なものから複雑なものがありますので、ホームページの制作中に使う機会があればついでに覚えるってカンジで良いと思います。

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ!
Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。