組み合わせ
同じ属性を持つ複数のセレクターを繰り返す必要はありません。セレクターをカンマ (,) で区切るだけで済みます。
たとえば、次のコードがあります。
| h2 { 色: 赤; } .thisOtherClass { 色: 赤; } .yetAnotherClass { 色: 赤; } |
次に、次のように書くことができます。
| h2、.thisOtherClass、.yetAnotherClass { 色: 赤; } |
入れ子になった
CSS が適切に構造化されている場合、あまりにも多くのクラスや識別子セレクターを使用する必要はありません。これは、セレクター内でセレクターを指定できるためです。 (もっと言えば、コンテキストセレクター - 翻訳者による)
例えば：
| #トップ { 背景色: #ccc; パディング: 1em } #トップh1 { 色: #ff0; } #トップページ { 色: 赤; フォントの太さ: 太字; } |
これにより、次のように HTML に適用すると、不要なクラスまたは識別子セレクターが排除されます。
| <div id="トップ"> <h1>チョコレートカレー</h1> <p>これはチョコレートだけでカレーを作る私のレシピです</p> <p>うーん、うーん、</p> </div> |