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

製作

最終更新日:2021/02/20

ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

一番最初に出てきた要素にだけ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>

結果:

チガウarticle
コイツ!div
チガウdiv
コイツ!article

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

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

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

まとめ

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

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

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

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.

こんなにも一ミリも目を引かれないタイトルを取り扱ってます: グラビアアイドルになるチャンス / 炭酸水サーバー・ザ儀式 / 超カンタン絶品カンパンレシピ /