CSSで複数のセレクタに同一のプロパティ、値を指定したいと思ったことはありませんか。デザインの関係上、そういったことを考えることは少なくないのではないでしょうか。
今回はそんな悩みを解決するべく、CSSで複数のセレクタに同一のプロパティ、値を指定する方法を解説していきたいと思います。
Contents
結論：CSSで複数のセレクタに同一のプロパティ、値を指定したいときはセレクタ間に『,(カンマ)』を入れる
CSSで複数のセレクタに同一のプロパティ、値を指定したいときにはそのセレクタ間に『,(カンマ)』を入れることにより、それが可能となります。
この方法を習得することにより、これまでに記述したコードの多くを省略することができ、これからのコードの記述時間短縮にも繋がります。
CSSの書き方について、あまり自信のない方や再度復習したい方はCSSとは？CSSの使い方、書き方を初心者でも分かりやすく簡単解説で詳しく解説していますので、参考にしてみてください。
それではここから複数のセレクタに同一のプロパティ、値を指定する方法を解説していきます。
準備：同一のプロパティ、値を指定したいセレクタを用意する
まずは同一のプロパティ、値を指定する複数のセレクタを用意します。
下記のコードを見てください。
<p class="sample-1">本文１</p>
<p class="sample-2">本文２</p>
<p class="sample-3">本文３</p>
それぞれ『sample-1』、『sample-2』、『sample-3』のclass属性を指定したpタグを3つ用意しました。
上記の画像を見て分かるように、現在はCSSを何も指定していないので、文章はデフォルトの黒字になっています。
ここからこのテキストを利用して解説をしていきたいと思います。
１：同一のプロパティ、値を指定したいセレクタ間に『,(カンマ)』を入れる
複数のセレクタに同一のプロパティ、値を指定したい場合、そのセレクタ間に『,(カンマ)』を入れることにより可能となります。
.sample-1,.sample-2,.sample-3 {
color: red;
}
今回は全てのタグをセレクタにして『color: red;』を指定することで全ての文章を赤字にしました。
コードを見て分かるようにセレクタ間には『 ,(カンマ) 』が入っています。これによって全てのクラスに同一のプロパティ、値を指定することが可能となります。
この時、CSSでclass属性を指定するときに必要なクラス名の前に記述する『.』を忘れないようにしましょう。
これがない場合、正常にCSSが反映されない場合があります。『 ,(カンマ) 』がある場合もない場合と同様に忘れないように気を付けていきましょう。
今回はclass属性の使い方は割愛しましたが、class属性、また、それと類似したid属性についてはclass属性、id属性の違いとは？それぞれの使い方を徹底解説で詳しく解説していますので、参考にしてみてください。
注意：親セレクタ、子孫セレクタの関係を示すときは『,(カンマ)』を入れず『半角スペース』
これまで解説した方法を身に着ける前にはなかったミスかもしれませんが、親セレクタ、子孫セレクタの関係を示すときは『,(カンマ)』を入れず『半角スペース』を入れます。
この二つはパッと見では分かりにくい違いではありますが、全く違う指令を出す記述です。
一回間違えると次から気を付けようと意識できますが、間違えがない方が良いですし、それを忘れた時に再び間違えてしまいます。
そのため、ここで一度注意喚起をさせていただきました。これからはその部分にも注力してコードを記述するように心掛けることを提案します。
今回、解説した方法を駆使すると、無駄な記述を多く省略することが可能となります。その結果、CSSをより綺麗に記述することが可能となり、その見やすさは格段に向上します。
複数のセレクタに同一のプロパティ、値を指定する方法自体は難しいことではありません。必ずこの知識を実際のコードに反映し、より素晴らしいコードを完成させましょう。
