CSS – 「.class1 (半角スペース).class2」と「.class1.class2」

年明けはやくも半月以上すぎ、いまさらながらですが明けましておめでとうこざいます。
本年もよろしくお願い致します。
今年一年自分にとっても、みなさまにとっても、よい年となりますよーに。

ちょこっとCSSについて、聞かれた事があったのでメモ。

「.class1 (半角スペース).class2」 と「.class1.class2」の違いについてですが、半角スペース区切りはよく見かけるし、利用していると思うのですが、「.class1.class2」とスペースなしでつなげたものを利用したことはあるでしょうか?

スペースで区切られている場合は「class1が指定された要素のなかのclass2の要素」で、「.class1.class2」とスペースなしでつながっている場合は「class1とclass2が両方指定された要素」となります。

<style>
  .t_red {
    color: red;
  }
  .t_blue {
    color: blue; 
  }
  .t_red.t_blue {
    color: green; 
  }
</style>
  <p class="t_red">Hello World</p>
  <p class="t_blue">Hello World</p>
  <p class="t_red t_blue">Hello World</p>

JS Binで動作確認する

あまり使わないし、目にする機会も少ないので、案外知らない方もいるかも?
「あ、スペースはいってない!」などといって勝手に書き換えないようにしましょう。。。

  • Category : CSS
  • Tags :