全称セレクタ（ユニバーサル・セレクタ）の完全解説

SNSでシェアする

全称セレクタ（ユニバーサル・セレクタ）の基本

全称セレクタ（ユニバーサル・セレクタ）は、全ての要素のプロパティを一括で操作する基本セレクタの一種です。一般的には、ウェブサイトが読み込むCSSファイルの中で、先頭に一度だけ宣言します。

全称セレクタの最も多く見られる使い方は、ブラウザの既定値を上書きしてスタイルを定義しやすくするための「CSSリセット」です。全ての要素には、あらかじめ定義されている各プロパティの初期値が適用されるため、それを統一することで多様な環境でも均一に見えるようにすることが目的です。

CSSのセレクタは、多数の要素の中からスタイルを適用したい要素を絞り込むためのものですが、全称セレクタに関しては、全ての要素に対して一括でスタイルを適用したい場合に用います。

全称セレクタの指定方法

全称セレクタは、ワイルドカード的な役割を果たす便利な機能です。指定する方法は非常に簡単で、記号一文字で表します。

このコメ印のような記号を「アスタリスク」と呼びます。アスタリスクはキーボードやテンキーに備わっており、アットマークや乗算記号のように直接CSSファイルへ書き込めます。構文は以下の通りです。

* {
	/* 全ての要素に適用するスタイル */
}

最も一般的な使用例は、全ての要素の余白をリセットして個別に管理するための下準備です。

* {
	margin: 0;
	padding: 0;
}

全称セレクタは、::beforeや::afterといった擬似要素にも使います。次の例は、擬似要素を含む全ての要素に対して、ボックス・モデルにおける代替モデルを適用するやり方です。

*, *::before, *::after {
	box-sizing: border-box;
}

全称セレクタを書く場所と宣言できる数

全称セレクタは、原則としてCSSファイルの一番先頭に書くことを推奨します。なぜなら、全ての要素に影響を及ぼすセレクタであるため、それよりも前に指定してある内容を上書きしてしまう可能性があるからです。

あくまで、全称セレクタはブラウザや要素ごとに異なる既定値を初期化し、開発者が意図した通りに表示される下準備の目的で使用すべきです。CSSファイルの途中に記述したり、ひとつのサイトで何度も宣言するものではありません。

機能としては、どこにでも、いくつでも使用できます。しかし、運用上の原則として純粋な全称セレクタはひとつのサイトにつきひとつ、それを最初に宣言しファイルの途中には書かない、これを覚えておくと良いでしょう。

全称セレクタの詳細度

全称セレクタは全ての要素のプロパティを一括で操作する強力なセレクタですが、その反面、上書きする能力はそれほど高くありません。

CSSには詳細度という機能が備わっており、ポイントによる格付けで指定された値の優先度が変わります。CSSの特徴として、カスケードの原則に従えば、より後に記述された内容が優先されます。

そのため以下の内容であれば、classセレクタのblueはredを上書きします。

しかし、全称セレクタを用いて同じように上書きしようとした場合、詳細度のポイントはclassセレクタの方が上であるため、宣言は無視されます。

これは安全であると同時に、全称セレクタはCSSファイルの先頭に書くべきという原則に帰結します。結局のところ、全称セレクタをCSSファイルの途中に記述しても、他のセレクタの指定を上書きできないからです。

全称セレクタは、詳細度の計算値に貢献しません。詳細度はポイントの加算によって重み付けを行いますが、全称セレクタのポイントは0です。

ただし、既定値や一部の擬似クラスは同じ詳細度であるため、上書きが発生します。そのため、特別な理由がない限り、やはり先頭に一度だけ使用することを推奨します。

htmlやbodyに指定する場合との違い

画面全体にスタイルを適用する場合、htmlやbodyをセレクタに使用することがあります。例えば、ページ全体の基礎となる文字色と背景色をbodyに指定します。

body {
	color: #333;
	background-color: #fff;
}

この状態であれば、サイト全体の背景色は白になり、文字の色は黒に近い灰色になります。そして、<body>に含まれる全ての要素、すなわち画面に映し出されるあらゆる要素が、同じ文字色を継承します。

アスタリスクを用いた全称セレクタでは、全ての要素のcolorプロパティとbackground-colorプロパティの値を同じものにします。

つまり、bodyセレクタの場合は、子孫要素に対して継承することになっている値しか反映されませんが、全称セレクタは無条件で継承しない値も上書きします。

どちらも画面に映し出される内容が一緒であっても、その過程で処理されている情報に違いがあることを覚えておきましょう。

全称セレクタの記述例

全称セレクタの記述例は、「CSSリセット」で検索すると色々な方法が出てきます。最適な内容は、CSSのアップデートやブラウザの実装状況によって常に更新されます。以下に示すのは、一般的なウェブサイトでよく見られる指定内容です。これを元に、自分のサイトに合う内容に調整していきましょう。


/* 全ての要素の余白をリセット */
* {
	padding: 0;
	margin: 0;
}
/* 全ての要素のボックス・モードを変更 */
*, *::before, *::after {
	box-sizing: border-box;
}

CSSリファレンス一覧

CSS学習ガイド

入基本的な解説から実用的な応用編まで

詳細 〉

CSSプロパティ一覧表

目的や頭文字からサンプルを検索

詳細 〉

特殊文字・特殊記号

HTMLで使える文字参照コード

カラーコード

HTMLやCSSで使える色指定