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