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

コンテンツへスキップ テンプレートファイルに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ではない

[mika_chi]

“ > ”

[hanabi_hibana]

隣接セレクタのつかいどころ

[witch-doktor]

:first-childって効くときと効かないときがあるよなあ、という長年の疑問が氷解しました。