CSS 選択子グループ

選択子グループ

h2 元素と段落に灰色を希望する場合、以下の宣言を使用するのが最も簡単です：

h2, p {color:gray;}

h2 と p 选择器をルールの左側に配置し、それらをカンマで区切ると、ルールが定義されます。その右側のスタイル（color:gray;）は、これらの選択子が参照する要素に適用されます。カンマはブラウザに、ルールに2つの異なる選択子が含まれていることを示します。このカンマがなければ、ルールの意味は全く異なります。後継子選択子を参照してください。

任意の数の選択子をグループ化することができ、制限はありません。

例えば、多くの要素を灰色に表示したい場合は、以下のようなルールを使用できます：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

ヒント：グループ化を通じて、クリエイターは特定のスタイルの種類を「圧縮」して、より簡潔なスタイルシートを得ることができます。

以下の2つのルールは同じ結果を得ますが、どれが書きやすいかは明確です：

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

自分で試してみる

グループ化はいくつかの興味深い選択を提供します。例えば、以下の例ではすべてのルールグループは等価で、各グループは選択器と宣言のグループ化の異なる方法を示しています：

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

自分で試してみてください：

グループ 3 では「宣言のグループ化」を使用しています。後ほど「宣言のグループ化」について説明します。

ワイルドカード選択子

CSS2 では、新しいシンプルな選択子 - ワイルドカード選択子（ユニバーサル選択子）が導入されました。これは星号（*）として表示されます。この選択子は、どの要素にも一致できます。それはワイルドカードのように機能します。

例えば、以下のルールは、ドキュメント内のすべての要素を赤くする：

* {color:red;}

自分で試してみる

この宣言は、ドキュメント内のすべての要素のグループ選択子として等価です。全ての要素の color 属性値を red に指定するために、ワイルドカード選択子を使用して一度のキーで操作できます（星号の一部）。

宣言のグループ化

選択子をグループ化することも、宣言をグループ化することもできます。

仮にすべての h1 要素が赤い背景を持って、28ピクセルの Verdana フォントで青色のテキストとして表示されるように設定したい場合、以下のスタイルを書くことができます：

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

しかし、上記の方法は効率が低いです。特に、複数のスタイルを持つ要素に対してこのリストを作成すると厄介です。その代わりに、宣言をグループ化することができます：

h1 {font: 28px Verdana; color: white; background: black;}

これは前の 3 行のスタイルシートの効果と完全に同じです。

注意、宣言をグループ化する際には、各宣言の最後に分号を使用することは非常に重要です。ブラウザはスタイルシート内の空白文字を無視します。分号が追加されると、以下の形式で自由にスタイルを構築できます：

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

自分で試してみる

どうですか、上記の書き方が読みやすくなったと思いますか。

しかし、二つ目の分号を省略すると、ユーザーエージェントは以下のようにスタイルシートを解釈します：

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

自分で試してみる

background が color に対して合法な値ではありませんし、color には一つのキーワードを指定することができるため、ユーザーエージェントはこの color 声明（background: black の部分も含め）を完全に無視します。その結果、h1 タイトルは青色だけが表示され、赤い背景はなく、さらに青色の h1 が表示されないこともあります。その代わり、これらのタイトルはデフォルトの色（通常は黒色）だけが表示され、背景色は一切ありません。font: 28px Verdana 声明は分号で正しく終わっているため、正常に機能します。

選択子グループと同様に、宣言グループも便利な方法であり、スタイルシートを短くし、よりクリアで、より簡単にメンテナンスできるようにします。

ヒント：ルールの最後の宣言の後に分号を追加することは良い習慣です。ルールに別の宣言を追加する際には、分号を忘れる心配がありません。

選択子と宣言のグループ化

選択子グループと宣言グループをルールで組み合わせることで、少ないステートメントで比較的複雑なスタイルを定義できます。

以下のルールは、すべてのタイトルに複雑なスタイルを指定しています：

h1, h2, h3, h4, h5, h6 {
  color: gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

自分で試してみる

このルールは、すべてのタイトルのスタイルを白い背景の灰色のテキストに設定し、内余白が 10ピクセル、1ピクセルの太い実線枠線があり、テキストのフォントは Verdana に設定します。