cssでfirst-of-typeが効かないなあ…なんでだろう…
その悩みを解決します
コードは実際にテスト済みです。
一応first-childの挙動もみておきましょう。
first-of-typeが効かないって言ってるのになんでfirst-childの解説をするんだよ。と思われるかもしれませんが、慌てずにとりあえずfirst-childが効かない例も見ておくことをおすすめします。
<body>
<style>
.foo:first-child{
color:red;
}
</style>
<div class="test">
<div class="element">element1</div>
<div class="foo">element2</div>
<div class="foo">element3</div>
<div class="foo">element4</div>
<div class="element">element5</div>
</div>
</body>まずこの場合は.fooが子要素の1番目じゃありませんので効きません。
出力結果は以下です。効いてません。これは理解できると思います。
first-of-typeが効かない？
次にfirst-of-typeが効かない例を見てみます。
<body>
<style>
.foo:first-of-type{
color:red;
}
</style>
<div class="test">
<div class="element">element1</div>
<div class="foo">element2</div>
<div class="foo">element3</div>
<div class="foo">element4</div>
<div class="element">element5</div>
</div>
</body>これだと.elementを除いて.fooの1番目が取得されると思うかもしれません。ですが出力結果を見てもfirst-of-typeが効いておらず文字色が変わっていません。
なぜクラス名指定でfirst-of-typeが効かないのか。見落としがちな仕様
では次の例を見て下さい
<body>
<style>
.foo:first-of-type{
color:red;
}
</style>
<div class="test">
<h1 class="element">element1</h1>
<div class="foo">element2</div>
<div class="foo">element3</div>
<div class="foo">element4</div>
<h1 class="element">element5</h1>
</div>
</body>これの出力結果は成功していることが確認できます。
さて、さきほどの例では要素をdivからh1に変えましたがなぜ同一要素のときにクラス名指定でfirst-of-typeが効かないのでしょうか？
とりあえず以下のサイトを参考にしました。
:first-of-type 擬似クラスは、親要素の子のリスト内でその型の最初の兄弟である要素を表します。:nth-of-type(1) と同じ。
https://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:first-of-type
子要素に同じ型の要素が混在している場合はどうすればいいのか
さて、さきほどのように疑似クラスが効かない場合はどうしたらいいのでしょうか。同じ型の要素が混在していてクラス名が違う場合疑似クラスが効きません。順番を把握してnth-of-typeを使用すればcssを適用させることはできますがあまり現実的ではありません。
この場合は隣接要素を選択するcssを使うと解決できると思います。
.element + .foo{
color:red;
}
//または↓
.element ~ .foo{
color:red;
} しかし隣接要素を選択する場合もテンプレートが違うと順番が変わってしまう場合もあるためこれでも対応できないこともあります。
大事なのはhtmlコードをかくときに要件をはっきりさせておくことです。
まとめ
なぜ効かないか？→知りません。
クラス名で指定してもその型（その要素の型）を見るってことなんじゃないでしょうか？
なので基本的にクラス名で疑似クラスを使うのはやめておいたほうがいいかもしれません。
よくfirst-of-typeとかでハマるときはこの仕様が原因かもしれないので頭に入れておくと今後はまらなくなるかもしれません。
コメント