CSS/疑似クラス/first-child

CSS/疑似クラス/first-child

first-child とは何を指すのか?

何を言いたいかというと

#hogehoge p:first-child{
    color: red;
}

とあった場合。こいつは

  • 1. 他にもいくつか要素があるなかで p 要素の一番始めのものを指す
  • 2. 他にもいくつか要素があるなかで 一番始めかつそれが p 要素のものを指す

のどちらなのか?ということ。このような場合

<section id="hogehoge">
    <h2>aaaa</h2>
    <p>bbbb</p>
    <p>cccc</p>
</section>

どうなるのか?試してみるとわかるが、この状況ではどれも赤色にならない。

つまり、ここでの p:first-child とは「2の 他にもいくつか要素があるなかで 一番始めかつそれが p 要素のものを指す」ということである。

このような状況で 「bbbb」をセレクトする擬似クラスも有るのである。指定要素の最初に現れるものを指定するには first-of-type という擬似クラスを使う

#hogehoge p:first-of-type{
    color: red;
}

とすると、「bbbb」だけ選択的に赤くすることができる。

first-child のほうが知れ渡っているのでこれを使っている状況が多いが実は状況的には first-of-type を使うほうが多い気がする。

css/pseudo_class/first_child.txt · 最終更新: 2019-01-25 16:43 by ore