IE 7 の :first-letter 擬似要素の font-size のカスケーディング

ユニバーサルセレクタの指定の影響範囲

IE 7 の :first-letter 擬似要素の font-size の算出でユニバーサルセレクタのことについて書きましたが、 selector's specificity としては低くても、要素ツリーにマッチするかしないかという点が考えられるなあ、と思いました。

今回は hxxk.jp の方の CSS を例に出しますが、要素セレクタによる指定が無い要素と、ユニバーサルセレクタで指定されているプロパティの関係について考えてみましょう。

* {
    color: #000;
    background: transparent;
    font-size: 100%;
    margin: 0;
    padding: 0;
}

a:link {
   color: #00f;
   background: transparent;
    text-decoration: underline;
}

a:visited {
    color: #800080;
    background: transparent;
    text-decoration: underline;
}

a:hover {
    color: #00f;
    background: #ccf;
    text-decoration: none;
}

これはリンクアンカー絡みの指定ですが、サンプルとして font-size プロパティの仕様が挙げられます。 これが CSS2 の Fonts - 15.2.4 Font size: the 'font-size' and 'font-size-adjust' properties の仕様で、次に引用するのが CSS 2.1 の Fonts - 15.7 Font size: the 'font-size' property の仕様です の部分に、 <a href="http://www.w3.org/TR/CSS21" title="Cascading Style Sheets, level 2 revision 1"><abbr title="Cascading Style Sheets">CSS</abbr> 2.1</a> という a 要素を親要素に持つ abbr 要素が出現します。

実際に Firefox などのブラウザで見てもらえれば分かりますが、この abbr 要素の部分の文字色は #00f ではなく #000 になっています。 (#00f はリンク先を未訪問の場合。 訪問済みであれば #800080 に読み替えてください。 ) カスケーディング重要 - 徒書を併せて読んでいただくと理解が深まると思いますが、 a 要素中の abbr 要素の文字色は、 a 要素から継承するのではなく abbr 要素にマッチするセレクタの文字色から適用してくることになります。

http://hxxk.jp/common/css/hxxk005.css では abbr 要素に関する宣言は特に書いていませんので、ユニバーサルセレクタの color: #000; がマッチすることになります。 もちろん、 abbr { color: inherit; } のような指定をしていれば、 abbr 要素にマッチする指定となって親要素の a 要素の文字色を継承しますが。

:first-letter 擬似要素も独立したノードとして扱う ?

ということは、 IE 7 の :first-letter 擬似要素の font-size の算出であれこれ悩んでいた点は、 :first-letter 擬似要素を元の要素のノードに含むか、独立したひとつのノードとして扱うかという点に着目すれば糸口が見えるような気がします。

CSS はどのように書いているか ( 初期状態 ) の例

もし IE 7 が h2:first-letter 擬似要素を独立したノードとして扱っていると仮定すれば、 h2:first-letter 擬似要素の宣言内では font-size が指定されていないので、ユニバーサルセレクタがマッチする、即ち h2 要素の font-size には影響されないということになります。

h2:first-letter 擬似要素に font-size: 100%; を指定するとの例

この例では、 100% の算出を h2 要素の font-size: 2em; から行っているようなので、 IE 7 は h2:first-letter 擬似要素を独立したノードとして扱いつつ、 h2 要素の子ノードとして扱っているように思えます。

body 要素に font-size: 100%; を指定するとの例

この例では、ユニバーサルセレクタの宣言では font-size が指定されていないので、 h2:first-letter 擬似要素の font-size は初期値の medium になり、親ノードである h2 要素の font-size: 2em; に対する medium としているように思えます。

ユニバーサルセレクタと body 要素に font-size: 100%; を指定するとの例

この例では、 h2:first-letter 擬似要素の宣言内では font-size が指定されておらず、ユニバーサルセレクタがマッチしてその font-size が適用されています。 やはり、 IE 7 は h2 要素と h2:first-letter 擬似要素はそれぞれ独立したノードとして扱っているのでしょうか ?

ユニバーサルセレクタに absolute units を指定するとやユニバーサルセレクタに relative units を指定するとの例

この例でも、 h2:first-letter 擬似要素の宣言内では font-size が指定されておらず、ユニバーサルセレクタがマッチしてその font-size が適用されています。 IE 7 は h2 要素と h2:first-letter 擬似要素はそれぞれ独立したノードとして扱っているのは間違いないように思えますが、 IE 6 も同じなのでしょうか ? でも <percentage> の指定の時は IE 6 は親ノードから算出しているように見えるしなあ......。

図にしてみよう

これらの仮説を基に考えてみると、逆に Firefox や Opera などは h2:first-letter 擬似要素は h2 要素のノードに含んでいるのでは、と思いました。 CSS はどのように書いているか ( 初期状態 ) の例では、 h2:first-letter 擬似要素の宣言内では font-size が指定されていませんが、 IE 7 と違って h2 要素にマッチして、 2em の大きさになっていますし。

しかし、 h2:first-letter 擬似要素に font-size: 100%; を指定するとの例で font-size: 100%; ではなく font-size: 150%; と指定すると、 h2:first-letter 擬似要素は h2 要素の 150% の大きさになるため、 h2:first-letter 擬似要素は h2 要素のノードに含まれつつ、 h2 要素の子ノードとしての性質も持っているのでは......とも思いました。 これらを図にしてみると、

IE 7

• 

Firefox や Opera

• 

といった感じでしょうか。 どなたか、 :first-letter ( に限らず ) 擬似要素のカスケーディングについて詳しい方がいらっしゃれば突っ込みをいただきたいと思います。