CSSの優先順位の仕組みと「点数の計算方法」

2019年9月7日

CSSをちゃんと書いているのに、なぜか反映されない！もしかしてCSSの優先順位が問題！？CSSセレクタによる優先順位ポイントの計算方法を解説してほしい！

そう、CSSには優先順位のルールがある！
今回はそんな君に、CSSを正しく反映できるように、CSS優先順位のメカニズムと点数の仕組みを、わかりやすく解説しよう！

CSSの優先順位の仕組みとは？

同じ要素に対して、相反するCSSが2つ以上書かれている場合、どちらが優先して表示されるのだろう？

CSSの優先順位にはいくつかのルールがある。その優先順位を決める要素には記述の順番、記述場所、セレクタの種類と点数が関係しているので、今回はそれを順番に解説していこう！

CSSの優先順位に影響する「記述の順番」

まずはCSSの優先順位の基本として「記述の順番を後に書いた方が優先される」というルールだ。

わかりやすい言葉で言うと、CSSを後で書いたほうで「上書きされる」というニュアンスが正しい！簡単な例でいうと次のようになる

CSS

p{
  color:red;
  color:blue;
}

このようにPタグに対して、同じプロパティであるcolorを２回記述した場合、後に書いた「blue」の色で表示されるということだ！例では同じセレクタ内で２回記述したが、セレクタを別の位置に書いた場合も、後に書いたほうが優先される。これは大原則として覚えておこう！

「CSSの記述場所」と優先順位

CSSが記述できる場所は基本的に３つある。

head内にstyleタグで書く
CSSの外部ファイルを作成してリンクで読み込む
任意のタグに直接（インラインで）書く

以上の３つがCSSの記述場所となるが、この中でCSSの優先順位はどうだろうか？

結論から言うと一番優先度が強いのが「(3) 任意のタグに直接（インラインで）書く」が一番優先度が高い。

次に優先度が高いのはそれ以外の２つ「(1) headタグ内のstyleタグで書く」「(2) CSSの外部ファイルを作成してリンクで読み込む」の優先度は同じである！

優先度が同じ場合は、CSSの大原則である「後に書いたほうが優先される（上書きされる）」が適用される！つまり上記の例の場合は、後に読み込みの記述がされている「(2) CSSの外部ファイルを作成してリンクで読み込む」の方が優先されるのである！

CSSの外部ファイルの読み込みの記述はhead内であればどこでもいいので、もしstyleタグより上に書いた場合は、優先度は下がることになる。

タグに直接インラインで書くのは更新性が良くない

では優先度が一番高い「タグにインラインで書く」のがいいかと言うと、そうではない！タグに直接書くのはわかりやすくていいのだが、HTML上のいろんな場所のタグに直接インラインで書いてしまうと、更新性・可読性が良くない。

CSSをページ全体・WEBサイト全体で管理する上で、更新性・可読性が悪いと制作効率も悪く、ミスも起こりやすいので、インラインに書くのは、特別な理由が無い限りはあまりおすすめしない。ちょっとしたCSSのテストなどで使う程度がいいだろう。

CSSの優先度を決めるセレクタの点数とは？

CSSの記述順と記述場所以外に優先度を決めるポイントは「セレクタの種類による点数」が影響する。どういう事かというと、下の表のようにCSSを記述する際のセレクタの種類によって点数が決められており、その点数が高いほど優先度が高いという事だ。

セレクタの種類	記述例	点数
ユニバーサルセレクタ	*	0点
要素名（タグ名）	p	1点
擬似要素	:first-child	1点
属性セレクタ	a[href="abc.com"]	10点
classセレクタ	.hoge	10点
IDセレクタ	#fuga	100点
要素に直書き	style="color:#ff0000;"	1000点

この表を理解するために次の例を見てみよう！

CSS

#example1{
  color:red;
}
.example2{
  color:blue;
}

HTML

<p id="example1" class="example2">何色になる？<p>

このように、同じ要素にたいしてIDとクラスセレクタによる異なるCSSの色指定があった場合は、上記の表の点数で見ると、IDが100点・classが10点なので、たとえ点数の低いclassが後に書かれていても「点数が高いIDが優先される」という事だ。

もし、これが同じclass同士だった場合、つまり点数が同じ場合はCSS上で後に書かれている方が優先されるという点も理解しておこう！

CSSの点数の計算方法！

CSSはシンプルにclassひとつ、IDひとつだけという場合だけではない。CSSでは複雑な入れ子構造の指定などもできるので、その場合の点数の計算方法も理解しておこう！

CSS

#example1 .example2 ul li{
  color:red;
}

この例の場合の計算方法を見てみよう。#example1がIDなので「100点」、.example2がclassなので「10点」、ulは要素名なので「1点」、liも要素名なので「1点」となり合計112点となる。

理解できただろうか？例のように入れ子構造の場合は、子孫セレクタを複数記述すると、点数が高くなるという事だ。

ただし必要以上に無駄な子孫セレクタを沢山書くと、管理がややこしく・可読性も悪いので必要最低限にとどめておこう！

CSSを上書きしたい場合

もしすでに適用されているCSSを「上書きしたい」と思った時は、これまで学んだ優先順のルールを駆使して上書きする必要がある。

同じ点数であるclass同士の場合であれば、すでに適用されているCSSよりも後に記述すれば良いし、点数が低いセレクタの場合は、点数が高いセレクタに書き換えるか、子孫セレクタなどを複数書いて点数を上げるというのも一つの手だろう。

ただ、できれば無駄に子孫セレクタで点数を競うのではなく、シンプルにCSSの前後関係だけで区別できるように、classやidの付け方や、cssの設計を整理して上手にCSSを管理しよう！

どうしても上書きしたい時の!important

これまで見てきたような優先順位のルールだけでは難しい場合は、とりあえず優先させたいといった場合のCSS上書き方法として「強制的に最重要と位置づける!important」という記述がある！

CSS

#example1 p{
  color:red;
}
.test{
  color:blue !important;
}

HTML

<div id="example1">
  <p>赤色になる<p>
  <p class="test">!importantで青色になる</p>
</div>

この例の場合、通常だとIDである#example1の「100点」、タグ名であるpが「1点」の「合計101点」に対して、.testはクラスで「10点」だけなので、点数上は負けるのだが、プロパティの値の後にcolor:blue !importantのようにつける事で、最重要としてCSSを適用する事ができるのだ！

ただし!importantは困った時や、一時的な措置として使う程度にとどめておいて、管理が複雑になるので多様するのは控えよう！

また、当然だが!important同士がバッティングした場合は、後に書いたほうが優先などの、それ以外のルールが適用される。