勘違した疑似クラス first-childの使い方

Posted on2011年5月9日 Edit on2013年1月21日投稿者: toreno

テンプレートファイルにclassやidを追加できないため、CSSの疑似クラスを指定したんだけど、ちゃんと効かなくて困ってた。
でもよく調べてみたら自分の認識違いだった。

「first-child」という疑似クラスについて、これは”ある要素内で最初に出現する子要素”なわけで、
「p:first-chidl」と指定したら”最初に出現するp要素”として指定できるのかと思っていた。

例えば以下のHTMLの１番目のpタグにスタイルを指定したいとき。
<div> <h1>見出し</h1> <p>本文１行目</p> <p>本文２行目</p> </div>

で、スタイルシートを以下のように指定したけど効かなかった。

div > p:first-child {font-size:100%}

これは親要素divの子要素で最初に登場するのはh1タグで、pタグはfirst-childではないから。
わざわざp:first-childとしてるのだから、”divの子要素の最初のp”と理解してくれてもいいのになぁと思ってしまう。

リストタグなどはli:first-childでちゃんと１番目に適用されるけど、これは記述的にul li:first-child で ul が省略されている（と思う）。
しかも、クラス名では指定できない。
たとえば li.hoge:first-chid としても、.hogeが li の２番目以降にあると効かない。

じゃ、どうするかというと、first-childの代わりに隣接セレクタなどで指定する。

div > h1+p {font-size:100%}

これで、”divの子要素でh1の次のpタグ”を指定できる。
ちなみに２行目のpタグに指定したい時は

div > p+p {font-size:100%}

これで”pの次に登場するpタグ”を指定できる。

疑似クラスについてはもっときちんと調べておきたいので今後の課題にする。