HOME > > > セレクタ「*(アスタリスク)」を使って全ての要素にCSSを適用する方法

セレクタ「*(アスタリスク)」を使って全ての要素にCSSを適用する方法

セレクタ「*(アスタリスク)」を使って全ての要素にCSSを適用する方法

全ての要素に適用するCSSセレクタ「*(アスタリスク)」

ウェブサイトを作る時はページの共通マージンや、メニューの配置など、全体的にも個別でもベースになるCSSをいくつか必要とします。
そんな時は新しいidやclassで囲む事が多いと思いますが、全体共通の場合は全ての要素に適用するCSSを使って対応しちゃいましょう。

(アスタリスク)」を使って共通のCSSを設定する

「*(アスタリスク)」をCSSに設定する事で、「全体」でも「p」でも「div」でも「span」でも共通した命令をする事ができます。 ただ。。。全体以外はアスタリスク無しでも適用できるので、あまり使わないかな。。。

全体共通箇所にCSSを反映させる場合


* {
 color: blue;
}

「*」だけで設定すると全てのテキストカラーが青くなります。

「p」だけにアスタリスクを適用させCSSを反映させる場合


* p{
 color: blue;
}

pに「*」を付けると、p要素で囲んだ部分だけテキストカラーが青くなります。
pの部分をdivやspanに変えると、記述した要素に適用されます。

どこで使う?

要素に対して使う?と疑問に思われる方がいると思いますが、私もです。
基本的に「p」や「div」などの要素はアスタリスク無しでも適用するので余り使っていません。
ただ、ウェブサイト全体に適用するベースは専用の要素を使う必要がありませんので、「*」でまとめています。
細かな設定をしていくと結構便利ですが、大枠の部分では全体共通箇所で使用するのが良いと思います。

CSSセレクタは他にも色々と種類があり設定していけばとっても便利ですので、またちょいちょい書いていきます。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket