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>
赤くなりますよ
他人の書いたコードをいじらなければならない時、
パースされて自分でいじることの出来ない場所のスタイルを強引に変えたい時には、
優先順位を考えて、どうやったら他の場所に影響を出さず、
上書きできるのかを考えることがあると思いますので、参考にしてください。
