CSS class名の空白の意味

  • 2021年9月17日
  • 2021年11月15日
  • HTML/CSS
  • 2view

例えば、次のようなカンタンなHTMLを書きます。

<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セレクタを繋ぎます。セレクタでスペースを入れると、子孫要素セレクタになってしまうため、スペースを空けてはいけません。

最新情報をチェックしよう!

HTML/CSSの最新記事8件

>プログラミング 独学

プログラミング 独学

本当にプログラミングを学びたい人のためになるブログにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。

CTR IMG