CSSにおける複数クラスによる要素選択

必要に応じて、これらのクラスのうちの1つだけを持つ要素に影響を与えずに、 同時に2つのクラスを持つ要素を選択することができます。

例を見てみましょう。次のようなコードがあるとします：

html<p class="eee">
  This is a paragraph with text.
</p>
<p class="zzz">
  This is a paragraph with text.
</p>
<p class="eee zzz">
  This is a paragraph with text.
</p>

ご覧の通り、最初の段落はクラス eee を持ち、 2番目の段落はクラス zzz を持ち、 3番目の段落はこれら両方のクラスを同時に持っています。

他の段落に影響を与えずに、最後の段落を選択してみましょう。 そのためには、スペースを入れずに、1つのクラス名と2つ目のクラス名を続けて書きます：

css.eee.zzz {
  color: red;
}

html<p class="eee">
  This is a paragraph with text.
</p>
<p class="zzz">
  This is a paragraph with text.
</p>
<p class="ccc">
  This is a paragraph with text.
</p>
<p class="eee zzz ccc">
  This is a paragraph with text.
</p>