CSSで全ての要素にスタイルを適用する方法を紹介！
CSSで全ての要素にスタイルを適用する方法を紹介します。CSSで全ての要素に同じスタイルを適用したいことはあまり多くありませんが、reset.cssを自作するときなど、必ず必要となってきますので、この機会にぜひマスターしてください！
CSSで全ての要素にスタイルを適用したい
今回はCSSですべての要素にスタイルを適用する方法を解説します。
reset.cssを自作する場合やすべての要素のbox-sizingプロパティにborder-boxを指定したいときなどに有効な方法です。
*（アスタリスク）で全ての要素にスタイルを適用する
全ての要素に一括でスタイルを適用した場合は以下のように記述します。
全称セレクタ
*{
//スタイルの指定
}この*「アスタリスク」を「全称セレクタ」もしくは「ユニバーサルセレクタ」と呼び、すべての要素に対してスタイルを適用することができます。
全称セレクタを用いると全体にスタイルを適用することができるので、あまり使用頻度は多くありませんが以下のサンプルコードのような指定ができます。
親要素にあたるpタグにはスタイルが適用されていないのに対して、全ての子要素のpタグにはスタイルが適用されているのがわかります。
*「アスタリスク」の別の使用法
ここまで全称セレクタの*の使い方を解説してきましたが、*には「ワイルドカード」という便利な使い方があります。
「ワイルドカード」とは共通点がある名前を持つクラスに対して有効で、それらをまとめてスタイルを適用することができます。
例えばsection-1,section-2,section-3という3つのクラスに同じスタイルを適用したいとします。
あなたならどのようにCSSを指定するでしょうか。3つとも指定したり、3つにsectionという別のクラスをつけてsectionを指定するなどでしょうか。
ワイルドカードを用いれば、全てのクラスにsectionという共通点があることを生かして一括でスタイルを適用することができます。
以下のサンプルコードでご確認ください。
これは*に「~~~を含む」という意味があるからです。ワイルドカードにはそのほかにも^「~~~で始まる」、$「~~~で終わる」という意味のものがあります。
無料
【7月31日まで】全カリキュラム無料で提供中！
Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。
無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい！
