涙のCSSセレクタ

#新人時代のCSSってこんな感じ

20代の頃のCSSは
・親要素から共通するスタイルをざっくり指定
・子要素でスタイルを上書きしていく
という感じでした。

親よりも子が優先。CSSの指定は後出しが勝つ。
どうしてもスタイルがうまく適用されない場合は、idを付けて個別に対応。
それでもダメなら、禁断の「!important」を！

##でもね
そんな状態は長く続きませんでした。

例えば、以下のサンプルの場合、

sample1.html

<h2>最新バージョン一覧</h2>
<dl>
  <dt>■<span>PC製品版</span>(3000円)</dt>
  <dd>クライアント:<span>1.11</span></dd>
  <dd>サーバー:<span>1.11</span></dd>
</dl>

sample1.css

* {
  color: #000000;
}

dl {
  color: #ff0000;
}

dt {
  color: #0000ff;
}

dd {
  color: #00ff00;
}

##さあここで問題です
Q.「3000円」の文字色は何色でしょうか？
A.「#0000ff」

正解です！
「3000円」はdt要素の中にありますから「#0000ff」

##それでは、同じHTMLとCSSで
Q.「PC製品版」の文字色は何色でしょうか？
A. これもdt要素の中にあるから「#0000ff！」

ブッブー！不正解！
正解は「#000000」

##なぜだ！?
colorは継承するプロパティなので、
「親のdt」から「子のspan」に「color」も受け継がれるはずなのに。。。
その時、一瞬にして、自分の脳内にあるCSSパーサーが爆発しました。

##なぜそうなったかというとね
「spanタグにcolorの指定がなかった」から。

「*」は全称セレクタといって、「すべて」という意味です。

そして今回「span」については、何もスタイルが定義されていませんでした。

つまり「span」のスタイルを指定しない場合、
「*」のスタイルが「span」のスタイルとなります。

言い換えると
「spanのcolor」→「未定義」
「*のcolor」→「#000000」
なので
「spanのcolor」は「#000000」ということになります。

##まとめ
この経験は、あらためてCSSの詳細度について、きちんと勉強する良いきっかけになりました。
現在は、フロントエンドを中心に活動していますが、あの時お世話になった先輩の顔をふと思い出して、涙が頬を流れた週末でした。