優先順位を操作できるCSSの詳細度について

2020年12月22日CSS

CSSを記述していると、正しく記述されているのに、結果が反映されず困ることがあります。

それは、CSSの詳細度が関係している可能性が高いです。

CSSの詳細度が高いと、CSSが適用される優先順位が高くなります。

CSSでは、いろんな書き方で指定できるため、CSSの詳細度を理解して優先順位を操作できるようになりましょう。

CSSの詳細度

CSSには、いろんな指定方法があります。

たとえば、こんな感じです。

<section id="info">
 <h1 id="about" class="title box">Main Title</h1>
</section>
h1 { color: red; }
h1#about.box {color: yellow; }
section > #about.title { color: blue; }
section#info > h1 { color: pink; }

これらのCSSは、どれが優先されるのでしょうか。

具体的に詳細度の決まり方をみていきましょう。

詳細度の点数について

CSSのセレクターには、それぞれ詳細度の点数があります。

  • id
  • class, 属性, 疑似クラス
  • 要素、疑似要素

の3枠で点数を付与するシステムです。

詳細度は合計点ではない

CSSの詳細度は、合計点で決まるのではなく、上から順に高い値のものが優先される仕組みになっています。

つまり、

  1. id
  2. class, 属性, 疑似クラス
  3. 要素、疑似要素

この順番でCSSの詳細度が決まります。

詳細度が同じ場合はどれが優先されるの？

詳細度が同じ場合は、後にかかれているものが優先されます。

つまり、まずはidの数が多いものがまずは優先されます。

そして、idの数が同じなら、class, 属性, 疑似クラスの数が多いほうが優先されます。

それでも数が同じ場合、要素や疑似要素の数が多い方が優先されます。

全くどれも同じ場合は、下に書かれたスタイルが適用されます。

詳細度よりも優先される方法

CSSの詳細度は点数で決めるものでしたが、詳細度より優先される方法が2つあるので、その方法も知っておきましょう。

スタイルをタグ内に直接書いてしまう方法

スタイルを別シートで読み込んでいたり、head内で読み込んでいる場合、スタイルをタグ内に直接書くことで優先的に適用させることができます。

ただし、後から見返した場合に、混乱してしまうので、極力タグ内に直接書くのはやめましょう。

!importantを書く方法、最も優先される

!importantをつけることで、CSSの詳細度を無視して最優先してスタイルが適用されます。

しかし、!importantを使うと何が優先かわからなくなるので、極力使用しない方がいいでしょう。

CSSの詳細度より優先される方法は、このように存在していますが、スマートな方法ではない上に、メンテナンス性が悪くなります。

よって、なんでもかんでも!importantを使用するというのは控えましょう。
フレームワークを使用している場合など、調整が難しい場面もあるので、ルールを決めた上で使用するようにしましょう。

CSS

Posted by devsakaso