CSS 高級文法

選択子のグループ化

選択子をグループ化することができます。グループ化された選択子は同じ宣言を共有できます。必要な選択子をカンマで区切ります。以下の例では、すべてのタイトル要素をグループ化しています。すべてのタイトル要素は緑色です。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

継承とその問題

CSSによると、子要素は親要素から属性を継承します。しかし、これは常にそのように機能しません。以下のルールを見てください：

body {
     font-family: Verdana, sans-serif;
     }

このルールに基づいて、サイトのbody要素はVerdanaフォントを使用します（訪問者のシステムにそのフォントがある場合）。

CSSの継承により、子要素は最高レベルの要素（この例ではbody）が持つ属性を継承します（これらの子要素はp、td、ul、ol、ul、li、dl、dt、およびddです）。別のルールは必要ありません。すべてのbodyの子要素はVerdanaフォントを表示する必要があります。子要素の子要素も同様です。そして、ほとんどの現代のブラウザでは、実際にそうなっています。

しかし、そのブラウザの血塗られた戦争の年代では、このような状況は必ずしも発生しません。当時、標準のサポートは企業の優先選択ではありませんでした。例えば、Netscape 4は継承をサポートしていません。継承を無視するだけでなく、body要素に適用されるルールも無視します。IE/Windowsでは、IE6までこの問題が存在しました。テーブル内のフォントスタイルは無視されます。私たちはどうすればよいのでしょうか？

Netscape 4に優しくします

幸運に、あなたは「Be Kind to Netscape 4」と呼ばれる冗長ルールを使用して、古いブラウザが継承を理解できない問題を処理することができます。

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

4.0 ブラウザは継承を理解できませんが、グループ選択子を理解できます。これによりユーザーの帯域幅が少し無駄になるかもしれませんが、Netscape 4ユーザーをサポートする必要がある場合は、この方法を使用する必要があります。

継承は呪いですか？

「Verdana, sans-serif」フォントがすべての子要素に継承されないようにするにはどうすればいいですか？例えば、段落のフォントを Times にしたい場合、問題ありません。pに対する特別なルールを作成すると、それが親要素のルールを脱却します：

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }