CSSユニバーサルセレクター (*) — すべての要素の選択

CSSユニバーサルセレクター

ユニバーサルセレクター*は、タイプ、クラス、IDに関係なく、ドキュメント内のすべての要素にマッチします。詳細度への寄与がゼロであるため、広範なベースラインスタイルに有用です。

構文

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

詳細度

ユニバーサルセレクターの詳細度は**(0, 0, 0)**です。詳細度の計算に寄与しないため、他のどのセレクターでもオーバーライドされます。

一般的な使用例

CSSリセット / ノーマライズ:

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

レイアウト問題のデバッグ:

* {
  outline: 1px solid red;
}

コンポーネント内のスコープリセット:

.widget * {
  font-family: inherit;
  font-size: inherit;
}

パフォーマンスの誤解

*が遅いという一般的な誤解があります。現代のブラウザはほとんどのコンテキストで効率的に処理します。ただし、.parent * * * spanのような深くネストされたユニバーサルセレクターは、ブラウザが右から左へのマッチング中に多くの祖先をチェックする必要があるため避けてください。