Days

first-letter 疑似要素と入れ子の要素

今日、CSS の表示をテストしていて気づいたのですが…。

次の CSS をご覧ください。

h2:first-letter { color: red }

そして、下の要素を見てください。

<h2><a id="intro">Introduction</a></h2>

h2 要素の中に a 要素が入れ子になった、この記述。これに上の CSS を適用すると、どうなるでしょうか? 答えは、IE および Opera では最初の "I" が赤くなり、Firefox では変わりません。

この挙動、いったいどちらが正しいのでしょうか。一見すると IE と Opera が正しいように思えますが、上の CSS は h2 要素の先頭 1 文字に対してスタイルを定義しているのですから、実際には a 要素の 1 文字目である "I" にはスタイルを適用しない Firefox の振る舞いも妥当であるように思います。けれども IE や Opera が間違っているかというと、この場合 "I" は a 要素の先頭 1 文字であると同時に、その外側の h2 要素の 1 文字目でもあるので、間違いとも言い難いような気がします。

単なる実装の違い、と片付ければ簡単ですが、この動作は知らないと意外に落とし穴のような気がします…というか、私ははまりました。上記のような a 要素の有無で、ページによって h2 要素の表示が変わってしまうのですから。皆さんは、どちらの挙動が妥当だと思いますか?

• Posted at 21:30:57 in HTML/CSS
• Comments (0) | TrackBacks (0)
  • 
  • 
  • 
  • 

TrackBacks

このエントリのトラックバック URI (I)

• トラックバック内容 (excerpt) には必ずひらがなを含めてください。入っていない場合は拒否します。
• このエントリの URI を含まない (リンクしていない) トラックバック元からは受信しません。

Comments

投稿フォーム

名前 (N)
URI/メール (U)
タイトル (L)
コメント (C)	Ready to post a comment.

記入情報をブラウザに記憶 (R)

• コメント以外の入力は任意です。
• コメント文中には必ずひらがなを含めてください。入っていない場合は拒否します。
• メール アドレスは公開されませんが、URI を入力した場合は名前がリンクとなります。なお、いずれもコメント欄への入力についてはリンクされます。
• このページの URI をリファラとして送信しない UA からの投稿は受け付けません。