CSS：全称セレクタの使用について

質問

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要素」という解釈でよいのでしょうか？

回答よろしくお願いします。

回答No.1

grumpy_the_dwarf · ベストアンサー

スペースで繋ぐのは「子孫セレクタ」ですので、子要素だけでなく
孫要素やひ孫要素にも適用されます。例文の2番目の「セレクタ」の
ところがh3の孫ですね。継承しない属性について子セレクタと子孫
セレクタを比較してみるといいですよ。IE6は子セレクタ非対応なの
で要注意ですが。

というわけで、例3はh3の孫以下のem要素に適用され、h3の子のrm要
素には適用されないはずです。質問文で「子要素」となっているの
を「子孫要素」にすれば正解でいいと思います。

お礼

回答ありがとうございます。

なるほど。

h3 * em { color: red;}

この部分は「*」のみではなく、スペースでつながっている、つまり子孫セレクタということですね。そして、h3要素の子孫要素となるわけですか。
これで理解できました。

ありがとうございました。