記事本文
図を更に作り直してみました
IE 7 と Firefox 1.5.0.7 と Opera 9.02 の擬似要素の取り扱いに寄せられたコメントや IEは擬似要素に全称セレクタをマッチさせているように見える - 徒書での反応を受けて、少し考え方を改め、図を修正しました。
改めたというか IEは擬似要素に全称セレクタをマッチさせているように見える - 徒書における北村さんの
擬似要素というのはあくまで擬似的なものであり、実際にはそのような要素は文書内には存在しません。
存在しない要素なのだから全称セレクタに対するスタイル規則が適用されるはずもない
というのは元々の私の考え方でもあります。
( なので、 IE 7 の :first-letter 擬似要素の font-size の算出では
その元となる要素の値を元にするんじゃないのかなあ、と考えているのですが
という書き方をしています。 )
擬似要素というものは HTML 要素ツリー中に存在しないものを CSS のセレクタによって擬似的に指定するものですから、 IE 7 のようにユニバーサルセレクタにマッチするというのはおかしい、というのは同意です。 あとは :first-letter 擬似要素や :first-line 擬似要素のように「 HTML 要素ツリー中の要素の特定の部分を示す擬似要素」と、 :before 擬似要素や :after 擬似要素のように「 HTML 要素ツリーの中に新たに要素を生成する擬似要素」で扱いが違う可能性があるという推測ができるかもしれませんが......。
修正した図
- IE 7
-
- h2:first-letter 要素での font-size の指定が無ければ、 h2 要素にて font-size が指定されていても、何故かユニバーサルセレクタにマッチしてその font-size を適用する。
- h2:first-letter 要素にて
font-size: 150%;やfont-size: 2em;の指定があれば、 h2 要素を親要素として、その font-size の値を元に値を算出する。
- Firefox や Opera
-
- h2:first-letter 要素での font-size の指定が無く、 h2 要素にて font-size が指定されていれば、 h2 要素の font-size をそのまま適用する。 ( h2 要素やその親の要素でも font-size の指定が無ければ、 h2 要素の font-size はユニバーサルセレクタにマッチしてその font-size を適用する。 )
- h2:first-letter 要素にて
font-size: 150%;やfont-size: 2em;の指定があれば、 h2 要素を親要素として、その font-size の値を元に値を算出する。
最終的に「擬似要素は基本的に元の要素と同じノードとなって同じスタイルをとるが、併せて子要素として元の要素に対する継承も行い、値の算出を行う」という理解になりましたが、この理解で大丈夫でしょうか ?
トラックバック送信先
- IEは擬似要素に全称セレクタをマッチさせているように見える - 徒書
-
「存在しない要素なのだから全称セレクタに対するスタイル規則が適用されるはずもない」という点に同意します。 やはり IE 7 のユニバーサルセレクタマッチがおかしいのかなという当初の考えに立ち戻りました。
