【ユニバーサルセレクタ】すべての要素に適用させる

ユニバーサルセレクタ(全称セレクタ)は、すべての要素に対してスタイルを適用させたい場合に使用する書式です。 ユニバーサルセレクタとは、アスタリスク「∗」をセレクタとするものの事をいい、すべての要素に対してスタイルを適用することができます。

また「∗」のみが使用されている場合は省略できませんが、「∗」に続けて「#id名」や「.クラス名」などの指定がある場合は、「∗」を省略することも可能です。

ちなみにユニバーサルセレクタは個別性が「0」のため、一度基本となるスタイルを全ての要素、または個別の要素に指定し、他のセレクタでスタイルを上書きしていくといった使い方などができます。 他にも「∗」単体で使用することで、全ての要素に対してスタイルを適用できるため、各ブラウザのデフォルトスタイルシートをリセットするためにも利用されます。

例えば「∗{margin:0; padding:0;}」というようにすれば、新しくサイトを制作する際などに、特定のブラウザによる意図しない余白の発生などを避ける事ができます。

書式

  • {プロパティ名:値;} ……… すべての要素に適用させる

省略する場合、「∗ .sample{ …. }」であれば「.sample{ …. }」となる。「∗ #sample{ …. }」であれば「#sample{ …. }」となる。

使用した時の例

* {color: red; font-size: 14px;}
div.sample1 * {color: blue;}
<h4>今日の天気</h4>
<p>2017年1月16日の天気は雪です。</p>
<p>日本海側を中心に平野部でも大雪となってます。</p>

<div class="sample1">
<h4>今日の天気</h4>
<p>2017年1月16日の天気は雪です。</p>
<p>日本海側を中心に平野部でも大雪となってます。</p>
</div>

ブラウザ上の表示例

今日の天気

2017年1月16日の天気は雪です。

日本海側を中心に平野部でも大雪となってます。

今日の天気

2017年1月16日の天気は雪です。

日本海側を中心に平野部でも大雪となってます。

対応ブラウザなどのデータ

適用対象 すべての要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報