正しくclassを指定しているはずなのに、なせかcssがうまく反映されない
そんなとき、空白に気をつけてみて
<div class="container">
<p class="article">記事です</p>
</div>上のコードでは、divが親要素で、containerというクラスが付いています。
pはdivの子要素で、articleというクラスが付いています。
さて、ここで、div要素の中のarticleクラスの文字を赤色にしたい事例があるとします。
それで、やってしまったのが、次のCSSの記述。
div.article {
color:red;
}これだと文字の色は変わりません。
ここで正解は、
div .article {
color : red ;
}ですね。
divの後ろに半角空白を入れるのが正解です。
わたしも、これがなかなか見つからず、そして気付かず、悩みました。
div.articleとしてしまうと、あくまでも、div要素かつarticleクラスの場合になります。
<div class="article">ですね。
一方、
div .articleの様に空白が入ると、div要素の中（子要素）のarticleクラスが該当します。
HTMLやCSS、JavaScriptなんかは、空白の扱いが緩いんですよね。空白があっても無くても動作はほとんど変わりません。
そんな中で、CSSのセレクタの空白にはとんでもなく大きな意味があるのです。
要素は複数のclassを同時に持つことができ、その場合classどうしを半角スペースで区切ります。
<button class=“btn effect">button</button>例えばこのようなタグがあったとすると、button要素は「btn」というclassと「effcet」というclassを同時に持っていることになります。
決して、「btn class」という1つのclassではないということに注意してください。
そのため、この要素に対してスタイルを指定するには、
.btn { … }
または
.effect { … }
という記述をすることとなります。
もし両方のclassを条件に含めたい場合、つまりどちらか一方だけではなく、「btn」と「effect」の両方を持った要素としたい場合は、
.button.effect { … }
このように続けてclassセレクタを繋ぎます。
セレクタでスペースを入れると、子孫要素セレクタになってしまうため、スペースを空けてはいけません。