CSSでセレクタの「*（アスタリスク）」の意味は？
CSS を有効活用することで、サイトに様々なデザインを与えることができます。
デザインを与える対象(要素)を絞り込むためにid・classなどのセレクタを指定することが多いですが、指定できるセレクタの中に「*(アスタリスク)」も存在することを知っているでしょうか？
アスタリスクはすべての要素が対象のセレクタで、Webページ全体に適用されるCSSを記述したい際などに便利です。
*（アスタリスク）のセレクタの使い方
*(アスタリスク)の使い方は、ほかのセレクタと同じです。
このように、他のセレクタと同じように記述するだけで使用できます。
*(アスタリスク)はページ全体にCSSプロパティを適用したい(フォントサイズやベースカラーなど)ときに役立つので、適当なHTML・CSSファイルを用意して試してみると良いでしょう。
*（アスタリスク）のセレクタのメリット・デメリット
*(アスタリスク)には様々なメリット・デメリットがあります。
CSSスキルを磨きたいのであれば是非覚えておきたいことですので、それぞれ見ていきましょう。
全ての要素に対してCSSを適用できる
*(アスタリスク)を使用することで全要素にプロパティを適用できるため、以下のようなCSSリセットに役立ちます。
こういった指定方法を知っているだけでCSSファイルの容量を削減することができ、ページ総容量の削減やAMP対応に貢献できるでしょう。
特にAMP対応を考えている場合、CSSの総容量を50,000バイト以内に収めるというルールがあるので、少しでも容量を減らすために*(アスタリスク)を活用するようにしましょう。
CSSの優先順位付けに利用できない
*(アスタリスク)はCSSの優先順位付けに利用することができません。
CSSの優先順位づけを理解していると、「!importantを使わない(AMPフレンドリー)」CSS記述ができるようになります。
通常、CSSは同じセレクタを対象としたCSSプロパティがあると、一番最後に記述されたもので上書きされます。
ですがCSSの優先順位付を理解していると、上記サンプルのように、「color:red」で上書きされるはずのCSSプロパティを上書きさせないようにすることができます。
理解していれば非常に便利ではあるのですが、優先順位付けに*(アスタリスク)が利用できないので、優先順位付けには*(アスタリスク)は使えないのです。
優先順位の話はこの記事の本題から外れるので、詳しく知りたい方は個別に調べるようにしてください。
使う場面が少ない
*(アスタリスク)は、ページ全体に適用できるものの使う場面と言ったらCSSを初期化するときくらいでしょう。
ほとんどの場合はid・classなど明確なセレクタを指定するので、知っていたとしても使う場面がほとんどないのです。
また、同様の意味を持つセレクタ「html」のほうが使い勝手が良いというのも、使う場面がほとんどなくなっている理由の一つでしょう。
応用すれば使いこなせる(上級者向け)
先ほど使う場面がほとんどないと言ったばかりの*(アスタリスク)ですが、上手に使えばセレクタの絞り込みでも使用できます。
それなりのCSSを知識を持っていないと出来ないワザですが、「ある要素とある要素の間に何かのタグ(div・span・pなど)があった場合にのみ」といった要素の限定に応用できます。
現に上記サンプルでは、リンクの色がそれぞれ異なっているのが確認できるでしょう。
上級者向けではありますが、応用すればこのようなことができるので、もっとCSSについて詳しくなってみると良いですね。