非天マザー by B-CHAN

iPhoneの使い方、IT、金融、経済、不動産、保険、ビジネス、音楽、映画、ニュース、自己啓発などを語ります。

CSSにおけるセレクタの空白には重大な意味がある

CSSのセレクタ

 

 

JavaScriptの学習と併せてHTMLとCSSのおさらい中のB-CHANです。

HTMLやCSSは昔からこのブログでたまに使っていますが、きちんと基礎から網羅的に学習したことはありませんでした。

なので、今、JavaScriptを使うために、ゼロからHTMLとCSSも見直しているところです。

 

今回、CSSのセレクタに関して、一瞬、つまずいたので、他の初心者のためにも、書き残しておきます。

 

CSSの書き方は、

 

p {

  font-size:18px;

}

 

セレクタ {

  属性:値;

}

 

と言うように、最初にセレクタで要素やクラス、IDなどを指定して、波括弧の中で属性(プロパティ)や値を指定していきます。

ボクはこの、セレクタの微妙な記述の違いに引っかかりました。

 

 

セレクタの空白には意味がある

 

 

例えば、次のようなカンタンな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のセレクタの空白にはとんでもなく大きな意味があるのです。

 

今回は、細かいですが、そんなルールがあること、そして、それが重大な意味を持つことに改めて気付かされた、と言うお話でした。