プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

html.cssに関するTips

2017.12.19更新

擬似クラス nth-child と nth-of-typeの違いについて理解する

Attention!

ホームページのコーディングに必須となる擬似クラス。なかでも少しややこしい nth-child と nth-of-typeの違いについて、しっかり理解しましょう。

1混乱しがちな2つのcssについて
<section>
    <p>"親の1番目の子供かつ1番目のpタグ!"</p>
    <p>"親の2番目の子供かつ2番目のpタグ!"</p>
    <p>"親の3番目の子供かつ3番目のpタグ!"</p>
</section>


以下はCSSファイルです

/*nth-childで指定*/
p:nth-child(2) { color: red; }


/*nth-of-typeで指定*/
p:nth-of-type(2) { color: red; }

p:nth-child(2)

指定されたpタグ、かつ指定されたpタグの「親要素の2番目の子要素」を選びます。

→つまり上の例でいうと、指定されたpタグかつ、その親要素section内の全ての要素の中の2番目の子要素、という条件を満たす

<p>"親のニ番目の子供かつニ番目のpタグ!"</p>が選ばれます。

 

 

p:nth-of-type(2)

指定されたpタグの「そのタグの順番が2番目の要素」を選びます。

→上の例でいうと、指定されたpタグの親要素section内のpタグの中で2番目の要素である

<p>"親のニ番目の子供かつニ番目のpタグ!"</p>が選ばれます。

 

上記のケースでは、同じpタグが選ばれる事になります。

では次のようなケースはどうでしょうか?

2選択するタグに違いがでる場合は、こんな時です。
<section>
    <h1>"親の1番目の子供かつ1番目のh1タグ!"</h1>
    <p> "親の2番目の子供かつ1番目のpタグ!"</p>
    <p> "親の3番目の子供かつ2番目のpタグ!"</p>
</section>


以下はCSSファイルです

/*nth-childで指定*/
p:nth-child(2) { color: red; }


/*nth-of-typeで指定*/
p:nth-of-type(2) { color: red; }

 

<section>内の最初の要素はpではなく、h1です。この場合には先ほどと同じようにcssを書いても、

以下のように選択するタグが異なります。

 

p:nth-child(2)

指定されたpタグ、かつ指定されたpタグの「親要素の2番目の子要素」を選びますので、

<p>"親の2番目の子供かつ1番目のpタグ!"</p>が選ばれます。

 

 

p:nth-of-type(2)

指定されたpタグの「そのタグの順番が2番目の要素」を選びますので、

→上の例でいうと、指定されたpタグの親要素section内のpタグの中で2番目の要素である

<p>"親の3番目の子供かつ2番目のpタグ!"</p>が選ばれます。

 

違いがわかりましたか?

 

 

 

32のコードで解りやすく図解します。最初からそうしろ!と言われそうです(汗)
<section>
    <h1>"親の1番目の子供かつ1番目のh1タグ!"</h1>
    <p> "親の2番目の子供かつ1番目のpタグ!"</p>
    <p> "親の3番目の子供かつ2番目のpタグ!"</p>
</section>


以下はCSSファイルです

/*nth-childで指定*/
p:nth-child(2) { color: red; }


/*nth-of-typeで指定*/
p:nth-of-type(2) { color: red; }

図解で見るとすぐ理解できると思います。

 

 

つまり、nth-child(x)は、その親要素のx番目を全ての要素を対象に選び出すのにたいし、

element : nth-of-type(x)は、その親要素のx番目をelementの要素を対象に選び出すのです。

もうこれで完璧に理解できたと思います。

トップへ