この記事の要点

ユニバーサルセレクタは* で全要素にスタイル適用する CSS セレクタ 主な用途: リセット CSS (margin/padding/box-sizing の初期化) で頻出 結合可: section * で「section の全子孫」、*.button で「button クラスを持つ全要素」 名前空間付き: *|* 全名前空間 / svg|* SVG 内のみ など SVG/XHTML で使う 詳細度は 0 — どのセレクタにも負けるので常に最弱の上書きとして機能

ユニバーサルセレクタとは

ユニバーサルセレクタ (Universal Selector) は CSS のセレクタの一種で、要素名の代わりに * (アスタリスク) を指定することですべての要素にスタイルを適用します。

基本構文

* {
    color: #FFF;
}

この記述で HTML 文書内のすべての要素 (html, body, div, p, span, img...) のテキスト色が白になります。

典型的な使い方

1. リセット CSS

もっとも頻繁に見るユニバーサルセレクタの活用例。ブラウザ既定のマージン・パディングを一括でゼロにし、box-sizing を border-box に統一します。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

近年の主流は疑似要素も含める形:

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

これで width: 100px; padding: 10px; としても全体が 100px に収まるようになり、レイアウト計算が直感的になります。

2. 子孫セレクタとの組み合わせ

子孫結合子 (空白) と組み合わせると特定要素の全子孫を狙えます。

/* article の中の全要素に line-height を */
article * {
    line-height: 1.7;
}

/* .modal の直下の子要素だけ */
.modal > * {
    margin: 0 0 1em 0;
}

3. クラス・属性との結合

/* 「button クラスを持つ全要素」 — *.button と .button は同じ意味 */
*.button { padding: 0.5em 1em; }

/* data-* 属性を持つすべての要素 */
*[data-tooltip] {
    cursor: help;
    border-bottom: 1px dotted #aaa;
}

クラスや属性の直前の * は省略可能で、セマンティック的には同じです。

詳細度 (Specificity)

ユニバーサルセレクタの詳細度は (0, 0, 0, 0) — CSS の中で最弱です。タグセレクタ p (0,0,0,1) よりも弱く、どんなセレクタにも上書きされる可能性があります。

セレクタ	詳細度
*	0, 0, 0, 0
p	0, 0, 0, 1
.button	0, 0, 1, 0
#main	0, 1, 0, 0
インライン style	1, 0, 0, 0

逆に言うと、最弱のベース設定として安全に使えるのがメリットでもあります。

名前空間付きユニバーサルセレクタ

XHTML / SVG / MathML を混在させる場合、名前空間プレフィックス付きで使えます (CSS Namespaces Module Level 3)。

@namespace svg url(http://www.w3.org/2000/svg);

/* SVG 内の全要素のみに適用 */
svg|* {
    fill: currentColor;
}

/* すべての名前空間の全要素 */
*|* {
    color: black;
}

/* 名前空間を持たない要素のみ */
|* {
    color: red;
}

注意点とアンチパターン

1. パフォーマンス

かつて「* は遅い」と言われていましたが、現代ブラウザでは体感差はほぼないレベルに最適化されています。気にせず使って OK。ただし複雑なセレクタ (例: *:not(.foo) > *) は計算コストが上がるので避けましょう。

2. 全要素への適用は副作用が大きい

* { font-family: ... } のように継承可能なプロパティは body に書く方がメンテしやすいです。

/* NG: 全要素に強制適用 (継承される) */
* {
    font-family: "Noto Sans JP", sans-serif;
}

/* OK: body に書けば子要素が継承する */
body {
    font-family: "Noto Sans JP", sans-serif;
}

3. リセット CSS の現代版

近年は Tailwind の preflight、Andy Bell の Modern CSS Reset、destyle.css などが主流。* の使い方も限定的かつ意図的になっています。

/* Modern CSS Reset 風 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

/* 必要な要素にだけ追加リセット */
h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; }

FAQ

Q: * と html, body の違いは？
A: * は全要素を個別に対象。html, body はその 2 要素だけで、子要素には継承可能なプロパティだけが伝わる。用途は別物。

Q: ユニバーサルセレクタは IE でも動く？
A: IE5.5 以降のすべてのブラウザで動作する超古参セレクタ。互換性は心配不要。

Q: * を使うとボタンの内部要素まで影響する
A: * { all: unset } のような全プロパティリセットは強力すぎるので、コンポーネント単位の CSS-in-JS や Tailwind の not-prose 等で範囲を制御するのが現代的。

関連セレクタ

セレクタ	意味
*	全要素
p	p 要素のみ
p *	p の全子孫
p > *	p の直接子要素
*::before	全要素の ::before 疑似要素
:not(p)	p 以外の全要素 (詳細度は引数依存)