ここでは、スタイルシートでプロパティと値をちゃんと指定しているのに効いてくれないという問題を解消するための方法として、プロパティが効く優先順位がどうなっているのかについてお話します。

例えば、１つのテキストに複数の色の指定があった場合、最終的に適用されるのは１つの色（値）になります。これはスタイルシート上で優先順位が決まっていて、必ずどれかひとつの値に絞られるようになっているからです。その仕組がどうなっているのかを見ていきましょう。

優先順位はセレクタの書き方で決まる

ある要素にデザインを適用させたいときに、書き方って何通りもあると思います。class名だけで指定する方法、class名の要素も記入する方法、半角スペースでその親も記入する方法など。実は、この書き方で優先順位が決まるのです。

スタイルシートでは、セレクタの書き方によって点数が振り分けられる仕組みになっています。その合計点が最も高い指定方法が優先的に適用されます。みなさんが、よく使っているセレクタで優先順位を表すと次のようになります。

インライン（1000）＞idセレクタ（100）＞classセレクタ（10）＞タイプセレクタ（1）

カッコの中が点数になります。一番左のインラインというのは、タグの中に直接style="プロパティ:値;"という形で記入する方法です。このように点数が一番大きなものが優先されます。

例えば、

p{color:red;}

このようにタイプセレクタで指定した場合は１点。

p.red{color:red;}

タイプセレクタにclassも入れて指定した場合は、「1+10=11」で11点。

さらに親要素を入れて指定した場合は、

div p.red{color:red;}

「1+1+10=12」で12点。

そこにid属性が入ると、

div#wrap p.red{color:red;}

「1+100+1+10=112」で112点といった形で合計した数字の大きさでデザインの優先順位が決まります。

下記に点数の一覧を載せておくので参考にしてください。

指定方法	点数
全称セレクタ	0
タイプセレクタ	1
擬似要素	1
擬似クラス	10
classセレクタ	10
idセレクタ	100
インライン（直書き）	1000

点数が同じ場合はどうなるの？

セレクタの指定方法で点数が同じものが複数あった場合、スタイルシートの下に書かれたもの（最後に読み込まれたもの）が優先されます。

ボタンで表示を切り替えてご覧ください。

See the Pen color by kenichi (@ken81) on CodePen.

この場合、下に書かれているp{color:blue;}の方が優先順位が高くなるので、p要素は「青」になります。

最優先で効かせたいときは!importantで指定

セレクタの点数に関わらずプロパティに下記のように!importantと記入すると、最優先で適用されるようになります。

See the Pen color02 by kenichi (@ken81) on CodePen.

この場合、本来であれば下に書かれているp{color:blue;}が適用されるはずなのですが、上に!importantと書かれているため、p要素は赤くなります。

コーディングを始めたての頃は、なかなか思い通りのデザインが効かず!important頼みになってしまいがちです。最初のころはそれでも良いのですが、!importantだらけのスタイルシートは美しいものではないので、点数を意識したコーディングができるようになると良いと思います。