hxxk.jpの以下3件の記事で扱っている問題について、表題に記した観点にてなるべく短くまとめようと試みてみます。
以下のようなスタイルシートとHTML文書の組み合わせについて、表示結果がどのようになるかを確認しました。(sample)
* {
font-size:100%;
font-style:normal;
}
p {
color: #666;
font-size:2em;
font-style:italic;
}
p:first-letter {
color:#c00;
}
<p>THIS IS A TEST.</p>
Firefox 2.0, Opera 9.01, IE6, IE7で確認し、以下のような表示となりました。
注目すべき点は、IE6, IE7がどちらも最初の"T"を斜字体にしていないことでしょう。p
要素に対しては font-style:italic;
が適用されているため、この結果は全称セレクタ(*
)に対するスタイル規則 font-style:normal;
が適用された結果と考えられます。
確かに、CSS2仕様の "fictional tag" の考え方からすれば、この問題は以下のような仮想的なHTML文書に対するスタイル付けと考えることができるでしょう。
<p><p:first-letter>T</p:first-letter>HIS IS A TEST.</p>
しかし、擬似要素というのはあくまで擬似的なものであり、実際にはそのような要素は文書内には存在しません。存在しない要素なのだから全称セレクタに対するスタイル規則が適用されるはずもないわけで、最初の"T"の表示は、p
に対するスタイル規則にp:first-letter
に対するスタイル規則が加わった、「2倍の大きさの赤い斜字体」となるのが妥当かと思います。
この観点からすると、FirefoxとOperaの表示結果は妥当に見えます。
一方、IE6, IE7はp
及びp:first-letter
に対するスタイル規則に加え、明らかに全称セレクタに対するスタイル規則が加わっています。これは存在しないはずのp:first-letter
という擬似要素をあたかも実際に文書内に存在しているかのように扱っているためではないでしょうか。
擬似要素と全称セレクタとの関わりについては異論があるかもしれませんが、自分としては「実際に要素として存在していない部分なのだから、全称セレクタに対するスタイルが加わるのはおかしい」と思っています。しかしいずれにせよ、IEとその他のブラウザでは、擬似要素にあたる箇所に全称セレクタに対するスタイル規則を適用するかどうかについて、異なる動作をしているということは言えるかと思います。
ところでIE6とIE7で最初の"T"のフォントサイズが違っているのは、不可解なままです。フォントサイズに注目するならば、まずp
に対しては font-size:2em;
が適用され、更に p:first-letter
に対して全称セレクタ由来の font-size:100%;
が適用されたとしても2emのままのはずであり、IE6での表示の方がより妥当に思えるのですが。IE7ではp
の外(body
)からフォントサイズを継承しているのでしょうか? 謎です。