時計を壊せ

駆け出しWebプログラマーの雑記

HTMLのclassの複数指定とCSS

追記

id:kitsさんにブックマークコメントでご指摘頂いた点を修正しました。
ご指摘ありがとうございました!

本題

HTMLでclassを複数指定したときの挙動について id:ofsilvers に教えてもらったのでメモ。
classを複数指定したときに、同じパラメータが指定されていた場合はCSSで後に定義されたものCSSで詳細度が高いものが優先される。
classの指定した順序は関係ない。
HTML::MobileJpCSS とか HTML::DoCoMoCSS を見ていてなんで複数classの指定に対応しないんだろうとか思ってたけど、こういう理由なら対応したくないですね!
あるいは適当にmergeしつつ、重複した指定があったときは死ぬ。とかあっても良いきがする。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>CSS test</title>
    <style>
.blue1 {
  color: blue;
}
.green1 {
  color: green;
}
.green2 {
  color: green;
}
.blue2 {
  color: blue;
}
    </style>
  </head>
  <body>
    <h1>CSS Test</h1>
    <p class="blue1 green1">green</p>
    <p class="green1 blue1">green</p>
    <p class="blue2 green2">blue</p>
    <p class="green2 blue2">blue</p>
  </body>
</html>