セレクタのグループ CSS プロパティとは
トピック:同じスタイルの複数の要素をスタイルするには、各要素名をカンマ(,)で区切る
element,element Selector
実例 コード 1
サンプル コードを試すh1 {font-size: 36px;font-weight: normal;}h2 {font-size: 28px;font-weight: normal;}h3 {font-size: 22px;font-weight: normal;}
情報:- スタイルシート内のいくつかのセレクタは同じスタイルルール宣言を共有することができる コンマ区切り
(,)のリストをグループ化して、スタイルシートのコードを最小限に抑えることができる 同じスタイルのルールを何度も何度も繰り返すことを 防ぐ ことができる
実例 コード 2
サンプル コードを試すh1, h2, h3 {font-weight: normal;}h1 {font-size: 36px;}h2 {font-size: 28px;}h3 {font-size: 22px;}
トピック:- 上記の例でわかるように同じスタイルルールは
font-weight: normal;セレクタによって共有されているh1、h2とh3。したがって、上記のコードようにコンマ区切りのリストにグループ化できる
構文
element, element { css : properties ; }
HTML要素名 {スタイル要素のプロパティ : プロパティ値; }
サポートするブラウザ対応・互換性
| Selector | Chrome | Edge | Firefox | Safari | Opera |
|---|
| element,element | フルサポート◯ サポート | フルサポート◯ サポート | フルサポート◯ サポート | フルサポート◯ サポート | フルサポート◯ サポート |
CSS セレクタのグループ | CSS プロパティ 値| 意味 使い方 実例 – WebRef