CSSの疑似クラス「nth-child」と「nth-of-type」の違いと使い方について【CSS】

コーディングをしていると最初や最後の要素だけ、2番目の要素だけ別のCSSを指定するといった場面があります。
そんな時に疑似クラスである:nth-child()を使用する事が多いかと思います。この使い方をGoogleなどで「CSS n番目」と検索すると、:nth-child()や:nth-of-type()が出てきてどちらもn番目を指定出来る疑似クラスで、混乱する方もいるかと思います。

今回は、疑似クラスである:nth-child()と:nth-of-type()の違いや、使い方を解説していきます。

疑似クラス:nth-child()と:nth-of-type()の違い

疑似クラスである:nth-child()と:nth-of-type()はどちらも同じ親要素内の兄弟要素で何番目になるかを指定するクラスです。これらの違いは数の数え方にあります。

:nth-child()は、同じ親要素内の全ての兄弟要素で何番目になるかを指定するクラスとなります。
これと比べ、:nth-of-type()は同じ親要素内の兄弟要素で指定した要素のみを数えます。例えば、p:nth-of-type(3)とすると「pタグのみを数えて3番目のpタグ」となります。

各疑似クラスの詳しい使い方は以下で解説していきますのでご覧ください。

:nth-child()の使い方

:nth-child()は、同じ親要素内の全ての兄弟要素で何番目になるかを指定するクラスとなります。
まずは以下のソースをご覧ください。

<div class="box">
    <p>p要素1</p>
    <p>p要素2</p>
    <div>div要素1</div>
    <p>p要素3</p>
    <p>p要素4</p>
    <div>div要素2</div>
    <div>div要素3</div>
    <p>p要素5</p>
</div>

.box {
    div:nth-child(3) {
        color: red;
    }
}

上記のCSSでは、.boxの中にある兄弟要素で3番目にあるdiv要素に対して文字色を赤にする指定をしています。
これを表示すると以下のように表示されます。

このように、特定の要素にだけCSSを当てる事ができます。

:nth-of-type()の使い方

続いて:nth-of-type()ですが、これは同じ親要素内の兄弟要素で指定した要素のみを数えます。
先程と同じHTMLでCSSは以下のように疑似クラスだけを変更してみます。

.box {
    div:nth-of-type(3) {
        color: red;
    }
}

上記のCSSに変更した場合、以下のように表示されます。

今回の例ではdiv:nth-of-type(3)で.box内にあるdiv要素の3番目を指定して文字色を変更しています。
:nth-of-type()を使用する事で、:nth-child()では難しい場合でも特定の要素を指定する事が可能です。

さいごに

いかがでしたでしょうか。
今回は、CSSの疑似クラス「nth-child」と「nth-of-type」の違いと使い方について解説しました。
後日、更に特定の要素を指定する方法をいくつか解説したいと思っていますのでお待ちください。