近年、レスポンシブに対応するスタイルシートが急速に発達しました。
それにともない、スタイルシートは多種多様化しました。
その反面ＨＴＭＬコーディング自体はシンプルになりました。
シンプルなＨＴＭＬに、複雑なスタイルシートをあてがうような形です。
そのようなコーディングをしていると、次のようなことをすることがあります。
特定の子要素だけにスタイルシートをあてがう。
例えばul、liタグの構成で、3番目のliタグだけに特定のスタイルシートをあてがうなどです。
昔ならば、特定の子要素タグにクラス指定をするなどありましたが、汎用性が低いです。
例えばナビゲーションボタンで、当該ページの場合のみ背景色を変える場合、特定タグにクラスを設定するのはあまり良い方法ではありません。
なぜならば、ナビゲーションボタン等は大抵編集ソフトでテンプレート化しているためです。
テンプレート化部分は、特定ページだけコーディングを変えるのは難しいです。
前置きが長くなりましたが、今回はコーディングはそのままで特定子要素をスタイルシートで指定する方法について調べてみました。
特定子要素を指定:nth-child
子要素を指定する場合の定番は「:nth-child」です。
以下のように使います。
<style type="text/css">
dl dt:nth-child(2)
{
background-color: #FF0;
}
</style>
<dl>
<dt>1</dt>
<dt>2</dt>
<dt>3</dt>
</dl>
上記の例だと、<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>
<dt>2</dt>は3番目の子要素だから （３）としていするのか？
それともdtタグで2番目だから（２）なのか？
正解は以下の書き方です。
<style type="text/css">
dl dt:nth-child(3)
{
background-color: #FF0;
}
</style>
2個目のdtですが、ddタグを含めると3番目になるため、（３）を指定します。
ちなみに dl dt:nth-child(2)を指定すると、何も反映されません。
2番目のタグはddのため、dtは違うからです。
もう一つの指定方法:nth-of-type
:ntn-child指定は「該当タグ」「すべての子要素の中から何番目か？」を指定します。
それに対し「該当タグ」「該当タグの中で何番目か？」という指定方法があります。
それが:nth-of-typeです。
具体的には、以下のように記述します。
以下の記述で、<dt>2</dt>を指定しています。
<style type="text/css">
dl dt: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>
:ntn-childは<dt>2</dt>を指定する場合（３）と記述しました。
:nth-of-typeは（２）と記述することで、<dt>2</dt>を指定できます。
これは、:nth-of-typeが、同一タグの中で何番目かを指定します。
結局のところ違いは次の通り
似たような命令ですが、つまるところ違いは以下の内容です。
- :nth-childは何番目のタグであるかを指定する
- :nth-of-typeは同一タグで何番目であるかを指定する
どちらも、同一グループ内の何番目のタグであるかを指定します。
複数のタグが混在している場合、挙動が少し異なります。
個数が正しくても、タグが間違っている場合は何も起こりません。
要は好みで使い分ければよい。
そんな結論に達しました。