>>0
揚げ足を取るが、「タグ」にはスタイル指定できない。どう頑張っても。
使い道を 2 つ考えてみた。
(1). 要素名以外での要素の絞り込み
そもそも、
.class-name { }
#id-name { }
は
*.class-name { }
*#id-name { }
の省略形。だから、全称セレクタには間違いなくお世話になっているはずだ。全称セレクタの使い道の 1 つは、このようにクラス名や id 名などを利用して、要素名以外で要素を絞り込むこと。
li > *:first-child + * { color: red; }
↑ li 要素直下の、最初の要素(何でも良い)の、次の要素(何でも良い)は赤くなる。
*.section1 *#table-of-contents *[title] { color: red; }
↑ class="section1" の要素内(何でも良い)で、id="table-of-contents" を持つ要素内(何でも良い)で、title 属性を持つ要素(何でも良い)は赤くなる。
(2). 継承しないプロパティの一括指定
CSS(Cascading Style Sheets)の「Cascading、継承」の意味を考えてみると良い。body 要素のボックスに与えたプロパティの、何が子孫に継承されて、何が子孫に継承されないのか(例えば、color は継承するが、margin は継承されない)。
継承されないプロパティは、当然だが子孫要素一つ一つに指定してやらねばならない。そのときに、全称セレクタが活躍する。例えば border は(初期値では)継承されないから、全ての要素に border を引くときは↓と書く。ボックス配置を確認するときによく使わないか?
* { border: 1px solid black; }
同様に、margin、padding、display も(初期値では)継承されないから、
* { margin: 0; padding: 0; display: inline; font-size: 100%; }
とかしてみれば、新しい世界が見えてくるかもしれない。ここから、全く新しいスタイルを創造してみてくれ。