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

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

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

例えば以下のHTMLの1番目のpタグにスタイルを指定したいとき。

<div>
<h1>見出し</h1>
<p>本文1行目</p>
<p>本文2行目</p>
</div>

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

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

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

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

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

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

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

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

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

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

コーディングに関する記事

コメント

  1. でみ より:

    first-childが効かない理由がわかりました。アップありがとうございます。

  2. admin より:

    コメントありがとうございます!
    つたない文章で恐縮ですが、お役に立てましたら幸いです。

  3. dico1225 より:

    CSSではなく、jQueryの仕様について困っておりましたが、大変参考になりました。
    ありがとうございました。

  4. admin より:

    コメントありがとうございます!
    お役に立ちましたら幸いです(^^

  5. nao より:

    ”divの子要素の最初のp”を実現したいなら
    div > p:first-of-type
    見出しの次に出てくる最初のpなら
    h1 ~ p:first-of-type
    がいいんじゃないでしょうか。
    ieが対応していないのが残念ですが。

  6. toreno より:

    ご指摘の方法がスマートですね。
    セレクタの使い方っていろいろあって難しい(^^;
    ありがとうございました。