CSS ・ CSSの記法
*
すべての要素を指定する
「*」（アスタリスク）1文字で、ページ内のすべての要素を指定するセレクタです。リセットCSSや box-sizing の一括指定によく使います。
01
サンプルコード
HTML
1<div class="box">width: 200px</div>
CSS
1*,
2*::before,
3*::after {
4 box-sizing: border-box;
5}
6.box {
7 width: 200px;
8 padding: 20px;
9 border: 4px solid #b68235;
10 background: #f6ead8;
11}
02
実行結果
ブラウザでの表示すべての要素が border-box になっているため、padding と border を足しても箱の幅は 200px のままです
03
解説
ユニバーサルセレクタ（全称セレクタ）は * と書き、html・body から span まで、すべての要素に一致します。
よく使うのは、上の例のように box-sizing: border-box をすべての要素にまとめて指定する書き方です。幅の計算に padding と border が含まれるようになり、レイアウトを組みやすくなります。::before・::after の疑似要素は * には含まれないため、一緒に書いておくのが定番です。
ほかのセレクタと組み合わせると範囲を絞れます。.card > * は「.card の直下の子すべて」、.list * は「.list の中のすべての要素」です。
詳細度は 0（0-0-0）なので、要素セレクタやクラスで簡単に上書きできます。
04
応用例・注意点
よく使う書き方
| 書き方 | 説明 |
|---|---|
* { } | すべての要素 |
*, *::before, *::after { } | 疑似要素も含めてすべて（box-sizing の指定で定番） |
.card > * { } | .card の直下の子すべて |
.list * { } | .list の中のすべての要素 |
子要素の間隔をまとめて指定する
隣接セレクタと組み合わせると、2つ目以降の子すべてに上の余白を付けられます。
CSS
1.stack > * + * {
2 margin-top: 16px;
3}
注意点
- 01* { margin: 0; padding: 0; } のように何でも指定すると、見出しやリストの余白がすべて消えるなど影響が大きくなります。指定するプロパティは最小限にします。
- 02文字色や書体のように継承するプロパティは、* ではなく body に指定すれば子要素に引き継がれます。