【複数のセレクタ】複数のセレクタに同じスタイルを適用

複数のセレクタに対して、同じスタイルを適用させたい場合は、「セレクタ,セレクタ{}」というようにカンマ(,)で区切って指定します。 こうすることで同じスタイルを複数のセレクタに対して適用することができます。

またカンマ「,」で区切る際の半角スペースは入れても、入れなくても問題ありません。 ですが、見やすくするために半角スペースを入れる事が多いようです。

書式

  • セレクタ, セレクタ {プロパティ名:値;} ……… 複数の要素に同じスタイルを適用する

使用した時の例

h4, span {color: red;}
.sample1, .sample2 {text-decoration: underline;}
<h4 class="sample1">今日の天気</h4>
<p>2017年1月16日の天気は<span>雪</span>です。</p>
<p class="sample2">日本海側を中心に平野部でも大雪となってます。</p>

ブラウザ上の表示例

今日の天気

2017年1月16日の天気はです。

日本海側を中心に平野部でも大雪となってます。

対応ブラウザなどのデータ

適用対象 要素名に指定した要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報