CSSで全ての要素にスタイルを適用する方法を紹介!

CSSで全ての要素にスタイルを適用する方法を紹介します。CSSで全ての要素に同じスタイルを適用したいことはあまり多くありませんが、reset.cssを自作するときなど、必ず必要となってきますので、この機会にぜひマスターしてください!

コンテンツ [表示]

  1. 1CSSで全ての要素にスタイルを適用したい
  2. 2*(アスタリスク)で全ての要素にスタイルを適用する
  3. 2.1*「アスタリスク」の別の使用法

CSSで全ての要素にスタイルを適用したい

今回はCSSですべての要素にスタイルを適用する方法を解説します。

reset.cssを自作する場合やすべての要素のbox-sizingプロパティにborder-boxを指定したいときなどに有効な方法です。

Photo byvanmarciano

*(アスタリスク)で全ての要素にスタイルを適用する

全ての要素に一括でスタイルを適用した場合は以下のように記述します。

全称セレクタ

*{
  //スタイルの指定
}

この*「アスタリスク」を「全称セレクタ」もしくは「ユニバーサルセレクタ」と呼び、すべての要素に対してスタイルを適用することができます。

全称セレクタを用いると全体にスタイルを適用することができるので、あまり使用頻度は多くありませんが以下のサンプルコードのような指定ができます。

親要素にあたるpタグにはスタイルが適用されていないのに対して、全ての子要素のpタグにはスタイルが適用されているのがわかります。

*「アスタリスク」の別の使用法

ここまで全称セレクタの*の使い方を解説してきましたが、*には「ワイルドカード」という便利な使い方があります。

「ワイルドカード」とは共通点がある名前を持つクラスに対して有効で、それらをまとめてスタイルを適用することができます。

例えばsection-1,section-2,section-3という3つのクラスに同じスタイルを適用したいとします。

あなたならどのようにCSSを指定するでしょうか。3つとも指定したり、3つにsectionという別のクラスをつけてsectionを指定するなどでしょうか。

ワイルドカードを用いれば、全てのクラスにsectionという共通点があることを生かして一括でスタイルを適用することができます。

以下のサンプルコードでご確認ください。

これは*に「~~~を含む」という意味があるからです。ワイルドカードにはそのほかにも^「~~~で始まる」、$「~~~で終わる」という意味のものがあります。

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。