CSSのnth-childとnth-of-typeの違いを覚える

CSSのnth-childとnth-of-typeの擬似クラスは要素を特定する仕方が似ているので違いを覚えておかないと、思った通りの要素にスタイルが反映されない問題に悩まされることがあります。

CSSでnth-childとnth-of-typeの違いは対になる擬似クラス名の違いなどを含めたとしても、nth-childとnth-of-typeが判定する適用要素の数え方の違いを必ず覚えておきたいです。

CSSのnth-childとnth-of-typeの数え方の違い

CSSのnth-childとnth-of-typeの違いは「全ての要素をカウント」する数え方か「同じ要素のみカウント」する数え方かという違いです。

• nth-childの数え方は「全ての要素をカウント」
• nth-of-typeの数え方は「同じ要素のみカウント」

nth-child系のfirst-childやlast-childも全ての要素をカウントする数え方です。

一方でnth-child系と対になるnth-of-type系ではfirst-of-typeやlast-of-typeなどが同じ要素のみをカウントする数え方です。

nth-childは全ての要素に適用

CSSのnth-childとnth-of-typeの違いのうち、nth-childが全ての要素に適用するというのは、CSSでnth-childをセレクタに指定した親要素に入る全ての子要素が適用の対象ということです。

例えば親要素のsectionの子要素にh2の見出しを１つと段落にしたpが4つあり、p要素の何番目かを指定するためにCSSのセレクタに擬似クラスのnth-childを用いるとします。

section p:nth-child(){.....}

nth-childは見出しにしたh2と段落にした4つのpの合計5つの全ての要素をカウントする数え方をして適用範囲の対象を判定します。

nth-of-typeは同じ要素のみに適用

CSSのnth-childが全ての要素をカウントする数え方をしてCSSを適用するのとは違い、nth-of-typeは同じ要素のみをカウントする数え方でスタイルを適用します。

親要素のsectionの子要素にh2の見出しと段落にしたpが4つあり、CSSのセレクタにnth-of-typeを擬似クラスで使用する場合を例にします。

CSSのnth-of-typeは段落にした4つの同じp要素だけを適用範囲の対象にして何番目だけ指定とか、偶数・奇数を指定するなどのCSSを適用します。

親要素から見てカウントの対象にする子要素をどのように数えるかという違いがあるため、指定要素以外の子要素が絡むと判定する順番がズレてしまいがちなnth-childは特にCSSが効かないと思ってしまいがちになります。

nth-childとnth-of-typeの違いを記述して覚える

CSSのnth-childで記述した表示とnth-of-typeに置き換えて記述した表示を見ると、どちらかのスタイルが効かなかったりするので、nth-childとnth-of-typeの違いを覚えるきっかけを掴みやすいです。

実際にnth-childとnth-of-typeの違いをCSSで記述して覚えるために使用したHTMLとCSSで説明します。

<section>
    <h2>見出し</h2>
    <p>テキスト</p>
    <p>テキスト</p>
    <p>テキスト</p>
    <p>テキスト</p>
</section>

HTMLはsectionを親要素にして子要素に見出しのh2タグを１つ、文書をpタグで4つ記述した要素です。

section p{
    background-color: #F3E775;
    padding: 10px;
    color: #2F3641;
    width: 300px;
}

CSSではsection要素のp要素のセレクタにnth-childとnth-of-type2つの擬似クラスを置き換えながら指定して適用される違いを見比べます。

nth-childだと効かない

section要素の子要素にh2とpの要素があるときCSSで擬似クラスのnth-child()をnth-child(1)でセクション内の子要素pの1番目にスタイルを適用しようとすると、指定したスタイルは効かないです。

section p:nth-child(1){
    background-color: #F3E775;
    padding: 10px;
    color: #2F3641;
    width: 300px;
}

nth-child(1)で指定したスタイルが効かない理由は、nth-child()とnth-of-type()の適用の違いにおいて、nth-childは「section内の全ての子要素をカウント」するからです。

擬似クラスのnth-child(1)がsection要素内の全ての子要素を対象にしてスタイルを適用するので、h2の見出しも子要素に含まれるためCSSが効かない。

それなのでsectionのpの子要素だけの1番目にスタイルを効かせる場合は、nth-child(2)にすると適用できます。

section p:nth-child(2){
    background-color: #F3E775;
    padding: 10px;
    color: #2F3641;
    width: 300px;
}

また全ての子要素を対象にした数え方なので:first-childの擬似クラスに置き換えたとしてもスタイルは効きません。

section p:first-child{
    background-color: #F3E775;
    padding: 10px;
    color: #2F3641;
    width: 300px;
}

first-childと違いfirst-of-typeならスタイルが反映します。

nth-child系の擬似クラスだと効かない場合には、nth-of-typeとの違いを思い出します。

nth-childが「全ての要素をカウント」するのに対してnth-of-typeが「同じ要素のみカウント」できるという基本的な違いがあることを。

nth-of-typeだと適用できる

親要素のsectionに入る子要素にh2とpがある場合を例にして引き続き説明します。CSSのセレクタにnth-child(1)とは違い、nth-of-type()に擬似クラスを置き換えて指定するとスタイルが適用できます。

section p:nth-of-type(1){
    background-color: #F3E775;
    padding: 10px;
    color: #2F3641;
    width: 300px;
}

これは擬似クラスのnth-of-typeがsectionの見出しを含めずに同じ子要素pの数だけをCSSの適用対象にカウントして1番目を判定するためです。

nth-child()が「全ての要素をカウント」するのとは違い、nth-of-type()が「同じ要素のみカウント」してることが擬似クラスを置き換えたことでわかります。

n番目の複数指定でも違いを覚える

nth-child()とnth-of-type()のカッコ内にnを使う場合の何個おきにとか、何個目以降などの複数指定でも違いを覚えることにします。

sectionの子要素にh2とpがある場合、nth-child()で4つのp要素の1番目から2個おきの奇数でスタイルを適用したいと思う数え方をした場合。

nth-child()とnth-of-type()の違いにより以下のCSSでは偶数にスタイルが反映したかのようになってしまい思った通りの適用ができません。

section p:nth-child(2n+1){
    background-color: #F3E775;
    padding: 10px;
    color: #2F3641;
    width: 300px;
}

nth-child()がsection内の全ての子要素をカウントする数え方をしているため、nth-child(2n+1)の1番目はh2も対象にして判定しているからです。

そのため2個おきにする記述をした2nもsection内のh2を1番目とした2個おきの数え方でCSSが適用するので、4つのp要素だけで見るとpの2番目からCSSを適用するような偶数の数え方になってしまいます。

nth-childは翻訳すると「n番目の子」つまりCSSを適用する親要素の何番目の子？のような覚え方ですね。

このとき擬似クラスをnth-child()とは違いnth-of-type()に置き換えると、思った通りの奇数の位置でCSSを適用できます。

section p:nth-of-type(2n+1){
    background-color: #F3E775;
    padding: 10px;
    color: #2F3641;
    width: 300px;
}

nth-of-type(2n+1)の上のCSSの場合、セクションの子要素p(同じ要素のみ)に2個おきに1番目のp要素からCSSを適用する子要素の数え方で判定できるため、nth-child()と違いnth-of-typeで思った通りのp要素だけを数えた奇数番目に複数指定が反映できます。

nth-of-typeを翻訳すると「タイプのn番目」つまりCSSを適用する親要素の子要素タイプで何番目の子？のような覚え方ですね。

上の画像左が先に説明したnth-child(2n+1)、右が後に説明したnth-of-type(2n+1)ですが、CSSの適用されてる場所が違うので理解できていないと「なんでだろ？」の世界に突入してしまいそうです。

好きな人を男女混合から何番目かを指名(nth-child)、好きな人を女性だけからタイプを何番目か指名(nth-of-type)こんな感じですかね。例え方違うかも…

まとめ

CSSでnth-childとnth-of-typeの違いを覚えてから、nth-childかnth-of-typeの指定が必要な要素に遭遇した際には、親要素にどんな子要素が入っているのか先に確認するといいかなと私自身が覚えてみて思えたことでした。

nth-childとnth-of-typeの違いを覚えたため、該当する要素に適した擬似クラスがnth-childかnth-of-typeのどちらが適切かを考えられるようになるので、使いわけを判断できるからです。