思ったようにCSSが適用されない？そんな時に見て欲しいCSSの指定による優先順位の計算方法-WEB向上中！

「CSSの記述は間違っていないのに、思ったように表示されない？」そんな時に確認すべきがCSSの優先順位です。
何となくで理解をしている方もいると思いますが、実際にどういった記述が強いのか？
ブラウザ側ではルールに基づいてCSS適用の優先順位が決定されています。

この記事ではどういった記述方法が、どういう優先順位で適用されているのかをご紹介いたします。

優先度の考え方

cssには記述できる箇所がいくつかあります。その記述箇所によって優先順位が決定付けされます。
記述できる箇所は、htmlの要素に直接書くパターンと、head内に記述するパターンと、外部cssを読み込むパターンがあります。

この3つのパターンで、htmlに直接書くパターンが何よりも優先されます。
head内に記述した場合と外部cssでの優劣はありません。後述する計算方法で一致した場合は、後で読み込まれたファイルが優先されます。
いくつか例を用いてご紹介します。

優先1：HTMLソースの要素への直接記述

<head>
  <style type="text/css">
    #h1 { color: white; }
  </style>
  <link rel="stylesheet" href="css/test.css">
</head>
 
<body>
  <h1 id="h1" style="color:red;">タイトル1</h1>
</body>

head内でid=h1に対して「color:white」の記述があります。ただid=h1のh1要素に、直接「color:red」の記述があります。
このように直接要素に記述しているCSSが一番強く適用されますので、「タイトル1」の文字は白色ではなく、赤色が適用されます。

外部ファイルtest.cssが読み込まれていますが、この中でid=h1に対してのcolor指定があったとしても、赤色の文字を変更する事はできません。
色を変えたい場合は、要素に記述された指定を変更するか、style属性そのものを消すかのどちらかで対応する必要があります。

優先2：セレクタ指定による違い

headに記述したCSSと外部CSSでは、head内で記述が後のものが優先されます。headに直接記入しているか、外部ファイルかという点においては優劣はありません。

それらに置いてはCSSの指定のセレクタ方式によって、優先度が決まります。セレクタとはCSSの要素を指定する時の記述において、以下のコードのようにidやclass名、要素に対して指定すると思いますが、その要素の記述方法の事です。

  #id1 .c1 { color: white; }
  #id1 p { colore: white; }
  h1 { color: white;}

指定方式がそれぞれ点数を持っており、その指定の組み合わせで点数が計算され、点数が高い指定方式が優先されます。
それぞれの計算方法は以下の表のとおりです。

指定方法	点数	補足説明
style属性	1,000点	html直接記述（style="color:red")
ID指定	100点	#id
class指定	10点	.class
擬似クラス指定	10点	.class[name="hoge"]
要素指定	1点	div
擬似要素指定	1点	div:first-child
全称セレクタ指定	1点	*

例えばclass指定が2つがあれば10+10で20点となります。またそれぞれの点数に桁がありますが、繰り上がる事はありません。ですので、IDを11個指定したからといって1,100点にはなりません。こういった理由からもhtml直接記入が最強となります。
少しイメージしずらいと思いますので、例を紹介し補足したいと思います。

<style type="text/css">
  #id1 .c1 { color: white; }
  #id1 { color: black; }
</style>
<h1 id="id1" class="c1">タイトル1</h1>

id指定は100点、id指定+class指定は、100+10の110点となります。このケースではタイトル1の文字は白色となります。
この例からも、後で記載されている黒色では無く、白色が適用される点がポイントで、記述の順序では無くセレクタの指定方法が優先されいてる事がわかります。

優先3：読み込み順序による違い

セレクタの記述による優先順位は理解いただけたかと思いますが、全く同じセレクタ指定が存在した場合どちらが優先されることになるでしょうか？
その際には読み込みが後のものが優先されます。

[test.css]
#h1 { color: black; }
  
[test2.css]
#h1 { color: blue; }

<head>
  <link rel="stylesheet" href="css/test.css">
  <style type="text/css">
    #h1 { color: white; }
  </style>
  <link rel="stylesheet" href="css/test2.css">
</head>
<body>
  <h1 id="h1">タイトル2</h2>
</body>

このケースではtext.cssでは黒色指定、head内では白色指定、test2.cssでは青色指定がされています。3つともid指定なのでセレクタの計算ではどれも100点となり、優劣が無い状態です。
この場合は読み込みが最後のものが適用されるので、一番最後に読み込まれているtext2.cssの青色が適用されます。

仮にtest2.cssの読み込みを一番最初にした場合は読み込みの優先順位の最後はheadに直接記述したものとなりますので、文字の色は白色となります。

優先順位を超越する !important 指定

適用される順序は理解できたかと思いますが、この計算法式を超越する指定方式があります。それが!important指定です。これを指定すると計算法式を無視して優先して適用されます。
記述方法は適用したい要素の後ろに半角スペースを入れて「!important」と記述すると、何よりもこの指定が優先されることになります。

<style type="text/css">
  .c1 { color: white !important; }
  .c1 { color: black; }
</style>
<h1 id="id1" class="c1">タイトル1</h1>

この記述の場合、c1の名前のclass指定が2つ並んでいます。通常であれば同じセレクタ点数となるので、後で記述している黒色が適用されるはずです。
ただこのケースでは最初のc1への指定に !important指定があります。その為にこちらが何よりも優先され、文字は白色となります。

!important指定の注意点

!important 指定を使えば、何よりも優先されると勘違いされている方もいますが、実際にはstyleの直接指定には勝てません。
下記の場合はh1のstyleの直接記述があるので、important指定が効かず文字は赤色になります。

<style type="text/css">
  #id1 { color: white !important; }
</style>
<h1 id="id1" style="color:red">タイトル1</h1>　color:redが適用

!important指定は優先順位が強すぎるので、多用すると修正などが困難となります。大規模になればなるほど、この指定が足かせとなる事が良くあるので、基本的には!important指定を使わずに済むようにhtmlとcssを構築する事をオススメします。

CSS優先順位のまとめ

色々と書きましたが、改めて順位を整理しますと以下のようになります。

html要素への直接記入
!important指定
セレクタ指定で点数が高いもの
読み込み順序が後のもの

うまく適用されない場合、この順序を参考に、どの指定が適用されているかを分析してみて下さい。意図したものと違うものが適用されている可能性があります。

最後に

サイトの規模にもよりますが、基本的にCSSは外部ファイルで管理する事が、メンテナンス上にも優れているのでオススメです。!important や要素への直接記述は基本しないという方針でコーディングをすると、後々メンテナンスが楽なサイトとなると思います。

またCSSがどれが適用されているかは、ブラウザの開発ツールなどを利用するとわかりやすいです。ブラウザでF12を押すと開発ツールが表示されるので、こちらを使いこなせると問題解決が早まると思います。

思ったようにCSSが適用されない？そんな時に見て欲しいCSSの指定による優先順位の計算方法