複数のクラスセレクタ

css
  • 同じセレクタで、同じプロパティが設定された場合、後から設定した値で上書きされる。

hogeは青。

.red { color: red; }
.blue { color: blue; }

<p class="red blue">hoge</p>
<p class="blue red">hoge</p>
  • class属性の指定順は関係ない。

hogeは青。mogeは緑。hoge mogeも、moge hogeも赤。

p.hoge.moge { color: red; }
p.hoge { color: blue; }
p.moge { color: green; }

<p class="hoge">hoge</p>
<p class="moge">moge</p>
<p class="hoge moge">hoge moge</p>
<p class="moge hoge">moge hoge</p>
  • ただし、MacIE5.2.3の場合、複数セレクタ指定された最後のセレクタに単独のクラス属性が持ってかれる。

hogeは青。mogeも、hoge mogeも、moge hogeも赤。