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

はじめに

この記事の概要

対象となる方

詳細度とは

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

参考
詳細度https://developer.mozilla.org

ポイントについて

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

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

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

計算方法

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

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

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

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

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

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

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

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

 例

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

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のスタイルを適用させる強制力が強く、セレクタの詳細度のようなポイント制ではないのが特徴です。

インラインstyle

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

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

!important

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

まとめ

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

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

スポンサーリンク