【全ての要素】CSSでセレクタの「*(アスタリスク)」の意味と使い方を紹介!

【全ての要素】CSSでセレクタの「*(アスタリスク)」の意味と使い方を紹介!

CSSのセレクタの中に*(アスタリスク)があります。ですが、アスタリスクがどういう意味のセレクタなのか知っていますか?今回は、セレクタとしてのアスタリスクの使い方や、CSSで使用するメリット・デメリットを詳しく解説していきます。


目次[非表示]

  1. CSSでセレクタの「*(アスタリスク)」の意味は?
  2. *(アスタリスク)のセレクタの使い方
  3. *(アスタリスク)のセレクタのメリット・デメリット

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について詳しくなってみると良いですね。