CSSのユニバーサルセレクター（*セレクター）とは？使い方を実例付きで解説
CSSの *（アスタリスク）セレクターは「ユニバーサルセレクター」と呼ばれ、HTML DOM内のすべての要素をまとめて選択するためのセレクターです。タグ名やclass名を個別に指定しなくても、ページ上の全要素に同じスタイルを一度に適用できるため、リセットCSSやデフォルトスタイルの統一などによく使われます。
構文
CSSユニバーサルセレクターの基本構文は以下のとおりです。
* {
/* スタイル宣言 */
}
それでは、具体的な使用例を見ていきましょう。
例1：すべての要素に共通のスタイルを適用する
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 15px;
padding: 5px;
border: 2px solid black;
box-shadow: inset 30px 0 8px lightblue;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
出力結果
この例では、tableやtdを含むページ内のすべての要素に対して、外側の余白（margin）、内側の余白（padding）、黒い枠線（border）、さらに水色の内側の影（box-shadow）が一括で適用されています。セレクターを複数書く必要がなく、コードがシンプルになるのがメリットです。
例2：html要素や入れ子の要素にも適用される
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 15px;
padding: 5px;
width: 200px;
border: 2px solid black;
}
html::before {
content: "one";
}
</style>
</head>
<body>
two
<div>three
<div>four
<div>five</div>
</div>
</div>
</body>
</html>
出力結果
この例では、html要素に::before疑似要素で「one」という文字列を挿入し、body直下のテキスト「two」や入れ子になったdiv要素（three / four / five）のすべてに、幅200px・黒枠・余白のスタイルが適用されています。ユニバーサルセレクターはhtml要素を含むあらゆる要素にマッチするため、このような挙動になります。
使用時の注意点
ユニバーサルセレクターは便利な一方で、すべての要素にスタイルが反映されるため、意図しない箇所まで影響が及ぶことがあります。大規模なサイトでは描画パフォーマンスや既存スタイルとの競合にも注意が必要です。
実務では、* { box-sizing: border-box; } のようにボックスモデルの計算方法を統一する目的など、限定的な場面で活用するのがおすすめです。
-
CSSの子孫セレクタとは？基本の書き方と実行例をわかりやすく解説
CSSの子孫セレクタ（descendant selector）は、指定した要素の「内側にあるすべての子孫要素」にスタイルを適用するためのセレクタです。親要素と対象要素を半角スペースで区切って記述するのが特徴で、直下の子要素だけでなく、孫要素やそれ以降の階層にある要素もすべてマッチします。 子孫セレクタの基本的な書き方 構文は以下のように、親となるセレクタの後に半角スペースを空けて、対象となるセレクタを続けて記述します。 親セレクタ 対象セレクタ { プロパティ: 値; } たとえば div p と書けば、「div要素の中に存在するすべてのp要素」がスタイル適用の対象になります。divの直下
-
CSSのグループセレクターとは？複数要素をまとめてスタイリングする方法
CSSのグループセレクターは、複数の要素を一度に選択し、共通のスタイルをまとめて適用するための機能です。各要素に同じスタイルを個別に宣言する必要がなくなるため、コード量を大幅に削減でき、保守性も向上します。グループセレクターの基本セレクターをグループ化するには、各セレクターをカンマ（,）で区切って記述します。これにより、リストアップされたすべての要素に対して、同じ宣言ブロック内のスタイルが一括で適用されます。構文element, element { /* 宣言 */ }それでは、具体的なコード例を見ていきましょう。例1：複数の要素に共通スタイルを