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のセレクタの空白にはとんでもなく大きな意味があるのです。
今回は、細かいですが、そんなルールがあること、そして、それが重大な意味を持つことに改めて気付かされた、と言うお話でした。
