セレクタのグループ化

TOPページに戻る > CSS

セレクタのグループ化

グループ化すれば、2つ以上の要素に対して同じスタイルを適用させることができます
グループ化すれば1行で2つ以上の要素にスタイルを適用できるので便利です
カンマで区切ってセレクタをグループ化しています

使い方　※セレクタは要素名やid名、class名などで指定します

セレクタ,セレクタ { プロパティ : 値; }

対応ブラウザ

b要素とstrong要素のセレクタをまとめて、グループ化するとこうなります

b, strong { プロパティ : 値; }

3つのセレクタに同じスタイルを適用することもできます

b, strong, em { プロパティ : 値; }

実際の指定方法

cssファイル　（b要素, strong要素の文字の色を赤に変更）

b, strong { color: red; }

html部分

<b>b要素</b>
<strong>strong要素</strong>

実際の表示

b要素
strong要素

複数のセレクタのグループ化

複数のセレクタを一括でスタイルを変更する場合もカンマで区切ってセレクタを追加していきます

h1,h2,h3,h4,h5 { color: red; }

後からスタイルを追加する

最初にグループ化して一括で決めたスタイルに後からスタイルを追加できます。優先順位は後から書いたほうが優先されるのでスタイルの変更も可能です
※グループ化しても要素名のみのセレクタの場合、1ポイントです。同じポイントの場合の優先順位は下に書いたcssが優先されます

/* プロパティを追加した例 */
h1,h2,h3,h4,h5 { color: red; }

h1 { font-size: 16px; } /* h1のスタイルに文字の大きさのプロパティが追加される */

/* プロパティの値を変更した例（スタイルを上書き） */
h1,h2,h3,h4,h5 { color: red; }

h1 { color: blue; } /* こちらの色が優先される */