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

スタイルを指定したけど、うまく反映されない！

そんな時、チェックしていますか？セレクタの優先順位について

実は最後に書いたものが最優先で反映される

初心者の方の落とし穴になることが多いのですが、実はスタイルは最後のほうに記述したものの方が優先的に適用されます。

例えばこんなふうにスタイルを指定したとします。

<p>何色かな</p>

p{ color:red; }
p{ color:blue; }
p{ color:yellow; }
p{ color:purple; }	

最後に指定した紫色が反映されましたね。

どうして最初じゃないのか？というと、上から順番に読み込まれて、最終的に一番下の記述が最新として適用されるからです。

ただし、これは同一属性への指定方法の場合なので、セレクタ別に検証してみましょう。

<p id="TEXT" id="text">何色かな</p>

#TEXT{ color:pink; }
.text{ color:brown; }
*{ color:black; }
p{ color:red; }	

今度はこんな風にidとクラスをつけた上でスタイルを当ててみました。

#はid名、.はクラス名、*(アスタリスク)は全称セレクタ(すべての要素への適用)です。
さて、ブラウザ上では何色が適用されると思いますか？

さっきの話の通りに考えると一番最後の赤が反映されると思いますが、答えはこれです。

一番最初に書いてあるのに、ピンク色が適用されましたね。

この場合より詳細性の高い指定が最も優先して適用されるのですが、個別指定のセレクタのなかでもIDとクラスではIDでの指定がより強いため、
pの要素に指定するよりも、全ての要素に指定するよりも、クラスに指定するよりも、IDが優先的に適用されています。

優先順位を表した得点表は以下です。
より点数が高い方が優先になります。複雑な指定でもこの得点を足して計算することで優先順位がわかります。

id指定はセレクタの中で一番強いです。
ちなみにもっと強いのはHTMLの要素へ直に指定する「style=""」指定です。(1000点)
これもスタイルシートでの指定よりもHTMLで要素に直接指定するほうが詳細性がより高いからです。

強制的に指定したい場合は？

セレクタの優先順位がだいたいわかったところで、優先順位の計算が追い付かないけど、どうしても一番優先的に指定したい場合どうすればいいのか？
そんな時に使用できる指定法を紹介します。

	<p id="TEXT" class="text">何色かな</p>

先程使用したHTMLをもう一度使用します。

	#TEXT{ color:pink; }
	.text{ color:brown; }
	*{ color:black; }
	p{ color:red; }	

例えばこの状態でp要素への赤色の指定を最優先にさせたいと思います。

	#TEXT{ color:pink; }
	.text{ color:brown; }
	*{ color:black; }
	p{ color:red!important; }

上記のように、指定の後ろに!importantを付けます。

ブラウザではどうなったでしょうか。

先程まではidのピンク色が表示されていましたが、今度は!importantで指定した赤色が採用されましたね。

これは「!important」が優先順位を無視して強制的に最優先で表示させる指定だからです。

注意すべきこと

いっけん便利に見える「!important」ですが、むやみに多用するのは避けるようにしましょう。

優先順位を無視してしまう強力さを持っているため、多用すると一体何が最優先的なのかわからなくなり、編集の際とても手間取るはめになります...。

どうしても指定したいスタイルの反映がされず、困った時の最後の手段として、覚えておくといいと思います。

「!important」をなるべく使わないために、優先順位を考慮しながらサイトを作っていきたいですね。