YouTubeでプログラミングを教えていますYouTube

css が反映されない classの前の空白の意味 

  • URLをコピーしました!

正しく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セレクタを繋ぎます。

セレクタでスペースを入れると、子孫要素セレクタになってしまうため、スペースを空けてはいけません。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次