« | »

nasshy
2013-07-12 10:28 am  

どっからどこが梅雨かわからへんなあと思ってたら、急に日差しが強くて火傷しそうなぐらいですね。
熱中症には気を付けましょう。
あ、なしろです。

週末とかにたまに勉強会開いて、HTMLとかCSSとかJavaScriptとかPHPとかとか、人に教えたりしてます。
勉強会と言っても最近主流の反転授業なんで、授業の準備みたいなのは要らなくて楽ですw
で、先日、CSSの詳細度について話す機会がありました。
意外ときっちり理解できてへん人もおるみたいです。
そこで今回は基本に立ち返り、CSSの詳細度についてまとめときます。
ちょっと長なるけど興味のある人はお付き合いください。
(びっくり真面目なお話ですw)

発端はある人の「このスタイル適用されへん。上書きされんちゃうの?」と言う言葉でした。
その人は単純に「idを使えば優先される」「あとから書いたスタイルが優先される」と思っていたそうです。
間違いじゃないですね。
それに対して他の人が「classも大事やで」とか「ようさん書いた方が強いねんで」と発言しました。
これも間違いじゃないですね。

では、例えば次のHTMLに

  <div id="contents">
    <div class="article">
      <div><ul>
        <li><input type="text" value="aaa" /></li>
        <li><input type="text" value="bbb" /></li>
      </ul></div>
    </div>
  </div>
CSSで次の指定をしました。
(問題のためややこしく書いてますw)
  #contents ul li:hover [type="text"] {color:#ff0000;} /* マウスオーバーで赤 */
  #contents div > div ul li:first-child input {color:#0000ff;} /* 1つ目だけ青 */
  #contents div.article  [type="text"] {color:#000000;} /* 黒 */
さて、”aaa”と”bbb”の文字色はどうなるでしょうか。
最初に書いた「マウスオーバーで赤」は適用されないのでしょうか。
いっぱい書いて長い「1つ目だけ青」でしょうか。
classを指定して最後に書いた「黒」でしょうか。
答えはWebで!

はい、ここがWebなので答えですw
「両方黒でマウスオーバーで赤」です。
いっぱい書いて長い「1つ目だけ青」は適用されません。
何が違うんでしょうか。
ここで出てくるのが「詳細度」です。
超簡単に言うと各セレクタが持つ点数です。
「idやclassが強い」とか「長いのが強い」とかはここから来てます。

では「詳細度」について。
セレクタの1つ1つに点数を付けます。
点数の付け方が独特で、1点とか10点とか100点ではなく、0.0.0.1点とか0.0.1.0点とかです。
“.”で区切られた数値を桁と考えてもらえればいいです。
セレクタそれぞれの点数は

インラインスタイル(style=””)
1.0.0.0
id
0.1.0.0
class、疑似クラス(:hover、:first-childなど)、属性セレクタ([type=”text”]など)
0.0.1.0
タグ、疑似要素(:afterなど)
0.0.0.1
となります。
classと属性セレクタが同じ点数なのは意外かもしれませんね。
点数は”.”で桁ごとを合計し、桁上げはしません。
例えばclassが100個、タグが200個指定されても0.0.100.200となって、id1個の0.1.0.0には負けます。
では先ほどの問題の点数を出してみましょう。
  #contents ul li:hover [type="text"] {color:#ff0000;} /* マウスオーバーで赤 */
  #contents div > div ul li:first-child input {color:#0000ff;} /* 1つ目だけ青 */
  #contents div.article  [type="text"] {color:#000000;} /* 黒 */
マウスオーバーで赤
→ 0.1.2.2
1つ目だけ青
→ 0.1.1.5

→ 0.1.2.1
はい「マウスオーバーで赤」>「1つ目だけ青」>「黒」の順番ですね。
このため、「1つ目だけ青」は適用されず黒となり、マウスオーバーで赤くなりました。
では、「マウスオーバーで赤」から”ul”を取るとどうなるでしょうか。
#contents li:hover [type="text"] {color:#ff0000;}
点数は0.1.2.1となり「黒」と同じになります。

答えはマウスオーバーしても黒のままです。
ここで「あとから書いたスタイルが優先される」が出てくるのです。
詳細度の点数が同じ場合はあとから書いた方を優先します。

まとめると

まずはセレクタごとの点数を計算し、点数が高い物を適用
点数が同じならあとから書かれた物が適用される

です。

長かったw
ではまた。

Comment & Trackback

Comments and Trackback are closed.

最近の投稿

Archives:

カテゴリー