2012年4月24日

CSSの優先順位について

こんにちは、鴨田です。
この間、弊社スクールのＴＡを務める機会があって、そこでCSSの優先順位について聞かれたので、ここでまとめておきたいと思います。
初歩的なことですが、重要なことでもありますので、知っている人もおさらいのつもりでご覧下さい。

○セレクタの読み込み順について

同じセレクタが指定されている場合は、後から読みこまれたものが優先されます。
つまり、２回同じセレクタが存在している場合、後から書かれたもののスタイルが適用されます。


p {color:#0f0;} /* こちらは劣性 */
p {color:#00f;} /* こちらが優先 */

○セレクタの優先順位について

一般的に、次のような順番で優先順位が決まっています。

　インラインによる指定＞ idによる指定＞ class・疑似class・属性による指定＞要素による指定

インラインによる指定：


<p style="color:#f00">

id指定：


<p id="id">


 #id {color:#0f0;}

class指定：


<p class="class">
.class {color:#00f;}


 .class {color:#00f;}

要素による指定：

<p>


 p {color:#f0f;}

あとは、それぞれどれだけ詳しく書くかによって決まります。
ポイント制という考え方もあるようです。

○ポイントの数え方

指定の仕方によりポイント数が変わってきます。

　インライン指定：1000点
　idによる指定：100点
　class・疑似class・属性による指定：10点
　要素による指定：1点


<head>
<title>CSSの優先順位</title>
<style type="text/css">
<!--
#id1 p {color:#0f0;} /* 101点 */
#id1 .class1 p {color:#00f;} /* 111点 */
#id1 #id2 p {color:#ff0;} /* 201点 */
#id1 #id2 .class2 p {color:#ff0;} /* 211点 */
#id1 .class1 #id2 .class2 p{color:#f0f;} /* 221点 */
-->
</style>
</head>
<body>
<div id="id1">
  <div class="class1">
    <div id="id2">
      <div class="class2">
        <p style="color:#f00;">ほげほげ</p> <!-- 1000点 -->
        <p>ほにゃらら</p>
      </div>
    </div>
  </div>
</div>
</body>

とした場合、

「ほにゃらら」と「ほげほげ」はHTMLの構造上は同列にありますが、
「ほげほげ」にはHTMLでインライン指定がされているので、color="#f00が適用され、
「ほにゃらら」には、CSSで一番詳細に指定され、点数の高いcolor:#f0fが適用されます。

ほげほげ

ほにゃらら

ただし、厳密にはポイント制が絶対ではなく、id*1(100点) ＞ class*11(110点)なので、
classなどを積み重ねても、優先順位で上位にある指定がされていれば、
そちらが優先して適用されることになりますので、注意してください。

下記の場合、classを11個重ねた指定よりも、idを1つだけ指定している方が優先順位が高くなります。


<head>
<title>CSSの優先順位</title>
<style type="text/css">
<!--
#sample p {color:#f00;} /* 101点 */
.sample1 .sample2 .sample3 .sample4 .sample5 .sample6 .sample7 .sample8 .sample9 .sample10 .sample11 p {color:#00f;} /* 111点 */
-->
</style>
</head>
<body>
<div id="sample">
  <div class="sample1">
    <div class="sample2">
      <div class="sample3">
        <div class="sample4">
          <div class="sample5">
            <div class="sample6">
              <div class="sample7">
                <div class="sample8">
                  <div class="sample9">
                    <div class="sample10">
                      <div class="sample11">
                        <p>赤くなりますよ</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>