スタイルシートの優先順位

「あれ？スタイルシートで指定しているのに何も変化しない！」

という経験はありませんか？

通常プログラムで同じ物に複数回処理の指定をすると、

後から書いたものが「上書き」され優先されます。

<p>スタイルシートの優先順位</p>

p{color:#ff0000;}

p{color:#0000ff;}

上記のような指定をすると、後から書いた

p{color:#0000ff;}が優先され文字は青になります。サンプル１

ただし以下の場合はどうででしょう？

<p id="text">スタイルシートの優先順位</p>

#text{color:#ff0000;}

p{color:#0000ff;}

後から書いている「青」ではなく、

先に書いた「赤」が反映されています。サンプル２

実はスタイルシートには優先順位があります。

それぞれのセレクタに点数が付いており、

その点数の合計が多いものほど優先順位が高くなります。

下記の表を見てください。

先に書いてある「#text」は100点、後に書いてある「p」は1点です。

結果、優先順位は点数の高い「#text」になり

「スタイルシートの優先順位」は赤くなります。

さらに、子孫セレクタなどと組み合わせをすると・・・

<div id="header"><p id="text">スタイルシートの優先順位</p></div>

#header p{color:#00ff00;}

#text{color:#ff0000;}

p{color:#0000ff;}

上記の場合には最初に書いてある

「#header p」が100点+1点の合計101点となり

最も優先順位が高くなります。

結果、「スタイルシートの優先順位」は緑になります。サンプル3

スタイルシートを学習する時のポイントは、

「どんなセレクタを書いたとしても、それが何らかしらの

HTML要素をしていしている」ため

『どの要素にスタイルを適用しているか？』を把握することです。
 

さらに上記の優先順位をしっかり把握しておけば混乱することはありません。

理解が進むとスタイルシートも楽しくなります。

学習中の方も、これから学習をされる方も頑張りましょう^^

 --------------------------------------------------------------------------------

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでCSSを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html