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