cssのfirst-childが効かない時のfirst-of-typeも効かない時

一番最初に出てきた要素にだけCSSを当てるfirst-child。でもこれはその子集団の中での順番を見ちゃうんで子集団にいろんなタグがごちゃ混ぜになってると効かないことが多い。

それでググると「チッチッチ、そういう時はfirst-childじゃなくてfirst-of-typeを使うんだぜ坊ちゃん」と。

確かにこれで子要素の中がいろんなタグごちゃまぜでも、最初のdivとか最初のPタグとかにちゃんとピンポイントでCSSを利かせられる。

しかし話はそこで終わらない。first-of-typeをもってしてもクラスが絡んでくると効かないこともある。

記事内ではfirst-childとfirst-of-typeで書いてるけれど、よりデカいまとまりであるnth-childやnth-of-typeでもまったく同じです。

1. クラスとfirst-of-type
1. CSSが効かないとき…
2. CSSが効くとき
2. 効かない理由
1. 各typeの最初のやつだけ見る
3. まとめ

クラスとfirst-of-type

クラスてのはclass、別にidでもいい。HTML要素に名前つけるやつです。多くの場合このクラス名やID名に対してCSSを適用していくわけです。

そしてこのクラスとfirst-of-type、一緒に使うと効かないことがある。

CSSが効かないとき…

<div class="oya">
  <div>チガウ</div>
  <div class="koitsu">コイツ！</div>
  <div>チガウ</div>
</div>
<style>
.oya>*{
margin-top: 4px;
background: #999;
}
.koitsu:first-of-type{
background: pink;
}
</style>

CSSが効くとき

<div class="oya">
  <article>チガウ</article>
  <div class="koitsu">コイツ！</div>
  <div>チガウ</div>
</div>
<style>
.oya>*{
height: 1em;
margin-top: 4px;
background: #999;
}
.koitsu:first-of-type{
background: pink;
}
</style>

という感じで、違うのは親（oya）の最初の子要素がdivなのかそうじゃないのかという違いだけ（見本はarticleになってるけど別になんでもいい）。

divだと効かない、divじゃないと効く、という結果になる。

効かない理由

これはfirst-of-tipeが「koitsuていうクラスが振られてる要素が最初に出てきたらその要素に利かせるぜ！」じゃなくて、「①それぞれの最初の要素みるかー。divは…、ああコイツか。②ほなクラス名見るかー。あれこのdivはクラスついてねーじゃん。んじゃCSS利かせられないね。はい終わり」という処理だから。

つまり上の書き方だとこうなる。

各typeの最初のやつだけ見る

<div class="oya">
  <article>チガウarticle</article>
  <div class="koitsu">コイツ！div</div>
  <div>チガウdiv</div>
  <article class="koitsu">コイツ！article</article>
</div>
<style>
.oya>*{
margin-top: 4px;
background: #999;
}
.koitsu:first-of-type{
background: pink;
}
</style>

子集団の中で最初のdiv発見！「koitsu」クラスついてるな！よしCSS適用！

お次は子要素の中で最初のarticle発見！「koitsu」クラスはついてないな！よしCCSは利かせない！

…

というのを続けてく感じ。

まとめ

cssのnth-childやnth-of-typeが効かないとき、それもクラスが絡んでくるときの話を書いた。

長くなったけれど、んじゃ「子要素の中で最初に出てきたクラス名」を指定したい時どうするの？て話だけれど、これは現状CSSだけだとできない。

javascript使うか、クラス名やIDの振り方で切り抜けるしかない。