【CSS】詳細度を知ろう！スタイルの優先度について簡単にまとめてみた！

はじめに

この記事の概要

コーディングしてる際に、ちゃんとプロパティを書いてるのにスタイルが反映されなくて、時間を無駄に費やしてしまうことってありますよね。
今回はその原因の1つである、詳細度（specificity） についてまとめました。
この詳細度は、初心者の方にとっては少し複雑で難しい部分にはなりますが、うまく使いこなせるようになれば、CSSについてはある程度マスターできるのでしっかり覚えておきましょう。

対象となる方

• CSSを勉強中の方
• Web制作でコーディングをしている方

詳細度とは

詳細度（specificity）とは、ブラウザでどのCSSのスタイルが適用されるか決定する際に用いられる優先度のようなものです。
この優先度（詳細度）は、様々な組み合わせのCSSセレクタで構成される一致規則に基づいています。

詳細度 - CSS | MDN

詳細度 (Specificity) は、ある要素に最も関連性の高い CSS 宣言を決定するためにブラウザーが使用するアルゴリズムで、これによって、その要素に使用するプロパティ値が決定されます。詳細度のアルゴリズムは、CSS セレクターの重みを計算し、競合する CSS 宣言の中からどのルールを要素に適用するかを決定します。

developer.mozilla.org

ポイントについて

詳細度つまりスタイルの優先度を決めるにあたって基準となるのが、セレクタのポイントです。

セレクタとは、CSSのスタイルをどのHTML要素に適用させるかを指定するのに用いられるもので、要素タグやclass名やid名などが挙げられます。

詳細度にかかわるセレクタの単体のポイントについては以下の通りです。
ポイントが高いほど優先度が高くなります。

計算方法

計算方法はセレクタのポイントの単純な足し算です。
その合計値が大きければ大きいほど、優先度が高くなります。
ポイントを多くとったほうが勝ちです。

ですが1つ罠があります。
それは、階層が下のセレクタがどれだけ集まってポイントを稼いでも上の階層のセレクタには勝てないということです。

【階層２】のクラスセレクタが11個集まって110ポイント、【階層１】のidセレクタが１つ100ポイントだったとします。
ポイントの高低で評価すると、

クラスセレクタ110ポイント ＞ idセレクタ100ポイント

ですが、前述した、階層が下のセレクタがどれだけ集まってポイントを稼いでも上の階層のセレクタには勝てない規則により

idセレクタ100ポイント ＞ クラスセレクタ110ポイント

という優先度になります。

0からコーディングする際は問題にはなることは少ないですが、既存サイトのデバッグやWordPressのテーマをコーディングする際は問題になることもあるので、頭の片隅に入れておくと良いと思います。

 例

下記のようなHTMLとスタイルシートがあったとします。

<div class="blue red">この要素の背景色は？</div>

div {
  height: 200px;
  width: 200px;
  background-color: black;
}
 
div.blue {
  background-color: blue;
}
 
.red {
  background-color: red;
}

この場合、

①divセレクタ
タイプセレクタ１つなので、1点

②.redセレクタ
クラスセレクタ１つなので、10点

③div.blueセレクタ
タイプセレクタ１つ + クラスセレクタ１つなので、11点

のようなポイントになります。

ブラウザで確認してみると

CSSの詳細度が同じであれば後に書いたプロパティが優先されますが、この場合上に書かれたセレクタの方が（11ポイント）詳細度が高いですし、階層も上位なのでそちらのCSSのスタイルが適用されます。

セレクタの詳細度とは別の優先度

これまで説明したセレクタの詳細度とは別の優先度があります。
これらはCSSのスタイルを適用させる強制力が強く、セレクタの詳細度のようなポイント制ではないのが特徴です。

インラインスタイル

インラインスタイルはセレクタの詳細度とは別の仕様で、スタイルシートのスタイルを上書きします。
そのため優先度が高いです。

スタイルシートに同じ要素に対してのスタイルが書かれていたとしてもすべてが無効になり、こちらが適用されます（!importantは除く）。

!important

こちらもセレクタの詳細度とは別の仕様で、他のプロパティを強制的に上書きするので、優先度がもっとも高いです。
ポイント制ではないのですが、ポイントで表すとしたら1000ポイントといったところです。
なので同じプロパティに!importantが記載された場合は、そのセレクタの詳細度が適用されます。

!importantを使用すると、後から別の場所でスタイルを上書きしたいときに、さらに!importantを追加しなければならなくなり、コードの保守性が低下します。
また、どのスタイルが適用されているか把握しづらくなるため、使用は控えましょう。

まとめ

「CSSの詳細度」を解説してきました。
うまく使いこなせるようになれば、CSSについてはある程度マスターできるのでしっかり覚えておきましょう。

CSSの基礎固め学習には以下の書籍がおすすめです。
是非ご覧になってCSSの知識を深めていきましょう。

Amazon

Amazon

amzn.to