menu
書いてる野郎
orebike@gmail.com
first-child とは何を指すのか?
何を言いたいかというと
#hogehoge p:first-child{ color: red; }
とあった場合。こいつは
のどちらなのか?ということ。このような場合
<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
を使うほうが多い気がする。