:nth-childと:nth-of-typeとの違いを調べてみた。

近年、レスポンシブに対応するスタイルシートが急速に発達しました。
それにともない、スタイルシートは多種多様化しました。
その反面ＨＴＭＬコーディング自体はシンプルになりました。

シンプルなＨＴＭＬに、複雑なスタイルシートをあてがうような形です。

そのようなコーディングをしていると、次のようなことをすることがあります。
特定の子要素だけにスタイルシートをあてがう。

例えばul、liタグの構成で、3番目のliタグだけに特定のスタイルシートをあてがうなどです。

昔ならば、特定の子要素タグにクラス指定をするなどありましたが、汎用性が低いです。
例えばナビゲーションボタンで、当該ページの場合のみ背景色を変える場合、特定タグにクラスを設定するのはあまり良い方法ではありません。

なぜならば、ナビゲーションボタン等は大抵編集ソフトでテンプレート化しているためです。
テンプレート化部分は、特定ページだけコーディングを変えるのは難しいです。

前置きが長くなりましたが、今回はコーディングはそのままで特定子要素をスタイルシートで指定する方法について調べてみました。

特定子要素を指定:nth-child

子要素を指定する場合の定番は「:nth-child」です。
以下のように使います。

<styletype="text/css">dldt:nth-child(2)
{
	background-color: #FF0;
}
</style><dl><dt>1</dt><dt>2</dt><dt>3</dt></dl>Code language:HTML, XML(xml)

上記の例だと、<dt>2</dt>だけ背景色が付きます。
dl,dtタグは変更する必要がなく、スタイルシートだけで特定の子要素に指定できます。

疑問：dtとddが混在している場合どのように指定するのか?

ここで疑問がわきます。
以下のような場合、<dt>2</dt>をスタイルシートで指定する場合はどうすればよいのでしょう？

<dl><dt>1</dt><dd>a</dd><dt>2</dt><dd>b</dd><dt>3</dt><dd>c</dd></dl>Code language:HTML, XML(xml)

<dt>2</dt>は3番目の子要素だから　（３）としていするのか？
それともdtタグで2番目だから（２）なのか？

正解は以下の書き方です。

<styletype="text/css">dldt:nth-child(3) 
{
	background-color: #FF0;
}

</style>Code language:HTML, XML(xml)

2個目のdtですが、ddタグを含めると3番目になるため、（３）を指定します。
ちなみに dl dt:nth-child(2)を指定すると、何も反映されません。
2番目のタグはddのため、dtは違うからです。

もう一つの指定方法:nth-of-type

:ntn-child指定は「該当タグ」「すべての子要素の中から何番目か？」を指定します。
それに対し「該当タグ」「該当タグの中で何番目か？」という指定方法があります。

それが:nth-of-typeです。
具体的には、以下のように記述します。
以下の記述で、<dt>2</dt>を指定しています。

<styletype="text/css">dldt:nth-of-type(2) 
{
	background-color: #FF0;
}
</style><dl><dt>1</dt><dd>a</dd><dt>2</dt><dd>b</dd><dt>3</dt><dd>c</dd></dl>Code language:HTML, XML(xml)

:ntn-childは<dt>2</dt>を指定する場合（３）と記述しました。
:nth-of-typeは（２）と記述することで、<dt>2</dt>を指定できます。

これは、:nth-of-typeが、同一タグの中で何番目かを指定します。

結局のところ違いは次の通り

似たような命令ですが、つまるところ違いは以下の内容です。

  • :nth-childは何番目のタグであるかを指定する
  • :nth-of-typeは同一タグで何番目であるかを指定する

どちらも、同一グループ内の何番目のタグであるかを指定します。
複数のタグが混在している場合、挙動が少し異なります。
個数が正しくても、タグが間違っている場合は何も起こりません。

要は好みで使い分ければよい。
そんな結論に達しました。

今回のレポートは以上です。
読んでいただいてありがとうございました。

ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
ホームページのご提案もさせていただいております

備忘録,CSSliタグの個数指定,何番目かでスタイルシート適用,同じような違うような

Posted by OBATA