CSSの全称セレクタの使い方を現役エンジニアが解説【初心者向け】
*(アスタリスク) は全称セレクタ(ユニバーサルセレクタ)と言い、全ての要素を対象とします。CSS をリセットしたり、共通的な初期設定を行ったりといった使い方をします。この記事ではその使い方を実際のコードを交えて解説します。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
CSSの全認証セレクタの使い方を、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

今回は、CSSに関する内容だね!

どういう内容でしょうか?

CSSの全認証セレクタの使い方について詳しく説明していくね!

お願いします!
全称セレクタ * とは
*(アスタリスク) は全称セレクタ(ユニバーサルセレクタ)と言い、全ての要素を対象とします。CSS をリセットしたり、共通的な初期設定を行ったりといった使い方をします。
全称セレクタ * の書き方
普通のセレクタと同じように * を使うことができます。
ある特定の要素配下(例えば <div class=”container”>…</div> など)にのみ適用させたい場合も、他セレクタ同様に div * と絞り込むことも可能です。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
実際に書いてみよう
全称セレクタ * を使って、次のように装飾してみましょう。
- 全ての要素を青文字
- .parent1 配下の要素は太文字
- .child 配下の要素は背景色を塗りつぶし
HTML
<div class="container"> コンテナ <div class="parent1"> 親1 <div class="child"> 子1 <div class="grand-child"> 孫1 </div> </div> </div> <div class="parent2"> 親2 <div class="child"> 子2 <div class="grand-child"> 孫2 </div> </div> </div> </div>
CSS
* { color: blue; } .parent1 * { font-weight: bold; } .child * { background-color: lightblue; }
全称セレクタ * をうまく使うことで、まとめてスタイルを適用できることがわかりますね。
執筆してくれたメンター
メンター稲員さん
フリーランスエンジニア。 おうち大好きマンです。 |

内容分かりやすくて良かったです!

ゆかりちゃんも分からないことがあったら質問してね!

分かりました。ありがとうございます!
TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。