Help us understand the problem. What is going on with this article?

涙のCSSセレクタ

More than 1 year has passed since last update.

新人時代の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の詳細度について、きちんと勉強する良いきっかけになりました。
現在は、フロントエンドを中心に活動していますが、あの時お世話になった先輩の顔をふと思い出して、涙が頬を流れた週末でした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away