CSSのスタイルの適用対象で、全ての範囲に適用される「*」ですが、分からないところがあります。
例：HTML
<h3>よく使う<em>セレクタ</em>の中で<i>最もよく使う<em>セレクタ</em></i></h3>
例1：CSS
* { color: red;}
例1の場合、全ての要素が対象となり、<h3>～</h3>内の全てが赤くなります。これは分かります。
例2：
h3 * { color: red;}
例2の場合、h3要素内の子要素に対して全て適用対象となるので、直接h3要素内にある、「よく使う」と「の中で」以外は全て赤になります。これも理解できます。
例3：
h3 * em { color: red;}
これが理解しづらいのですが、適用範囲は「h3内にある全ての子要素内のem要素」という解釈でよいのでしょうか？
回答よろしくお願いします。
投稿日時 - 2008-01-28 09:32:58
スペースで繋ぐのは「子孫セレクタ」ですので、子要素だけでなく
孫要素やひ孫要素にも適用されます。例文の2番目の「セレクタ」の
ところがh3の孫ですね。継承しない属性について子セレクタと子孫
セレクタを比較してみるといいですよ。IE6は子セレクタ非対応なの
で要注意ですが。
というわけで、例3はh3の孫以下のem要素に適用され、h3の子のrm要
素には適用されないはずです。質問文で「子要素」となっているの
を「子孫要素」にすれば正解でいいと思います。
投稿日時 - 2008-01-28 10:00:03
お礼
回答ありがとうございます。
なるほど。
h3 * em { color: red;}
この部分は「*」のみではなく、スペースでつながっている、つまり子孫セレクタということですね。そして、h3要素の子孫要素となるわけですか。
これで理解できました。
ありがとうございました。
投稿日時 - 2008-01-28 20:00:56
0人が「このQ&Aが役に立った」と投票しています
