CSSセレクタ便利ですね。JSでもquerySelectorとして使いまくっています。
これまでJSでは、getElementById("...")としていたところが、querySelector("#...")と使っているのですが、きっとgetElementByIdの方が処理が軽いんでしょうね。
querySelectorは、DOM構造の検索を逐一行っているに違いありません。
でも、プログラム整理するときは圧倒的に使いやすいし管理しやすいという事で、メンテナンス性でセレクタを使うことにしています。
さて、今回は、そんな便利なセレクタ記述の"nth-child"について、ハマってしまったことについて、調査＆２の轍を踏まないための備忘録として記事を書いておきます。
nth-childは、子要素の○番目
簡単な要素が羅列するDOM構造があった時に、任意番目の要素のみに適合させたいセレクタは以下のように書きます。
<div id="test-1">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
</div>
#test-1 > span{
background-color:red;
padding:8px;
color:white;
}
#test-1 > span:nth-child(2){
background-color:blue;
}
"nth-child(2)"なので2番目だけがblueになっているのが確認できますね。
数字を変えるだけでいいし、"2n"とすると、２の倍数の箇所、"3n"とすると３の倍数の箇所に適用できます。
また、"2n+1"という風にすると、1つスライドして適用されます（この時にnに0が入る事を意識してください）
他にも"even"で偶数値になり、"nth-child(n+2):nth-child(-n+4)"とする事で2から4に適用できるようになります。
少し複雑に感じる人は、実際に自分で書きながら体感するとすぐに覚えられます。
ハマったポイント
今回ハマった箇所は、nth-childを適用する子要素が複数のタグ構成の場合の話です。
以下のようなDOM構造に対してnth-childを適用してみましょう。
<div id="test-2">
<span>A</span>
<div>B</div>
<span>C</span>
<div>D</div>
<span>E</span>
<div>F</div>
</div>
#test-2 > div{
display:inline;
}
#test-2 > span,
#test-2 > div{
background-color:red;
padding:8px;
color:white;
}
#test-2 > span:nth-child(2){
background-color:blue;
}
cssが若干膨らんでいるのは、div要素をinline化して見え方を同じにしているためです。
基本的にはsample-1と同じ構成にしてあります。
結果はblueが適用されていません。
これは、span:nth-child(2)としているので、spanの2番目の要素に適用されると思って使ってみたところ、子要素の2番目はdivであるために、spanではないとして適用されなかったという事になります。
nth-child(3)にしてみたらどうなるでしょう？
子要素の3番目でspanタグの2番目が適用されました。
span:nth-child(...)となっている場合、通常の感覚であれば、span要素が先に検索されて、nth-childでカウントするのではなく、nth-childで子要素カウントしてから、タグ要素を検索に行くため、こうした入り混じったDOM構造の場合は管理が少し難しくなるということがわかりました。
もちろん、タグ要素の他にもクラス要素や属性要素などにもnth-childは擬似要素として適用できるのですが、子要素検索のnth-childが一番先に適用される事を分かっていないととんでもない不具合になってしまうので、この点要注意です！！
回避策
いっそのこと、nth-childには、タグや属性要素をつけずに、"div > *:nth-child(...)"とする方が不具合にならずにいいかもしれませんね。
この時の注意ポイントは、孫要素を引っ張ってこないようにするために、">"をつけて、子要素を明確にしてあげる事が重要です。
でも、できれば、nth-childは、一番最後に評価適用してもらう仕様が一番使い勝手がいいんだけどな・・・
この仕様が変わると、トラブルになるWEBサイトが山のように発生してしまう可能性があるので、「これはこれ！」として使用しましょう。
知らなかった人は、バッチリ覚えて起きましょうね。
0 件のコメント:
コメントを投稿