[CSS] CSSの詳細度による「適用順(優先順位)」と「上書き」

  CSS, WEB

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
CSS 詳細度 id class 上書き 適応 優先順位 タイトル

WEBサイトをコーディングしている際に、複数のCSSのスタイルを書き込みますが、それらにはセレクタの詳細度・固有性によってCSSのスタイルの適用される優先順位が存在します。
優先順位によって、先に定義された記述を上書きすることができる場合・できない場合が存在します。
そこで、今回は詳細度によるCSSのスタイルの適用順についてご紹介したいと思います。

セレクタ設定の基本

先に宣言されたスタイルが、詳細度・固有性によって後から宣言されたスタイルが継承・上書きされる。
より簡単に表現すると、後の方に宣言したものが適応される。(例外が詳細度による優先順位である)

p { font-size:16px;}/*適応されないスタイル*/
p { font-size:14px;}/*上書きによって適応されるスタイル*/

複数クラスの場合

下記の例のようにspanタグに複数のクラスが設定されて、CSSファイルにスタイルが記述されている場合、CSSファイル上の後に記述されているものが適応される。
この例においては同じ詳細度であるため、spanタグ内のクラスの記述順番は関係なく、セレクタであるstyle01クラスが適応される。

<span class="style01 style02">スタイル</span>
.style02 {
  color:orange;
  font-size:14px;/*上書きによって適応されるスタイル*/
}
.style01 {
  color:blue;
  font-size:16px;/*適応されないスタイル*/
}

詳細度の分類

セレクタには詳細度というものがあり、セレクタの設定によって詳細度が変化し、セレクタの詳細度によって優先されるスタイルが上書きされます。下記に詳細度の順番を示します。

詳細順位 セレクタ名 セレクタ例
1 !important a {font-size:16px !important;}
2 インライン記述(style属性) style="font-size:16px;"
3 idセレクタ #samplestyle
4 属性セレクタ・classセレクタ・擬似クラス [id="samplestyle"]など
5 要素セレクタ・擬似要素 div,p,aなどの要素
6 ユニバーサルセレクタ ∗{}

最優先となる!importantの記述

詳細度に関係なく!importantを付けたスタイルが最優先されます。後に他のスタイルを記述しても上書きされない特徴を持っています。下記に記述方法を示します。

p { font-size:16px !important;}/*適応されるスタイル*/
p { font-size:14px;}/*適応されないスタイル*/

しかし、「!important」は奥の手・切り札であり、CSSの破綻の可能性が高くなるため、頻繁に使用するものではなく使用しなくてもスタイルを適用できるように心掛けるようにしてください。

インライン記述(style属性)

直接HTMLのstyle属性にスタイルを記述することです。下記に記述例を示します。

<span style="font-size:16px;">スタイル</span>

しかし、!importantと同様で、避けたい記述方法です。なぜなら、HTMLは文章構造・骨組みを担い、デザイン・スタイルに関するものは外部ファイルのCSSに記述することをW3Cは推奨しています。そのため、Javascript・jQueryなどでの使用においてもなるべく避けた方がいいと思われます。

IDセレクタの記述

IDはページ内で一度のみ使用することができるものであり、詳細度としては高いものとなっています。下記に記述例を示します。

<span id="fontstyle" class="fontstyle">スタイル</span>
#fontstyle {
  color:orange;
  font-size:14px;/*適応されるスタイル*/
}
.fontstyle {
  color:blue;
  font-size:16px;/*適応されないスタイル*/
}
span {
  color:red;
  font-size:18px;/*適応されないスタイル*/
}

クラスセレクタ・属性セレクタ・擬似クラスの記述

classはページ内で何度も使用することができるものであり、IDより詳細度は低いものとなっています。下記に記述例を示します。

<span id="fontstyle" class="fontstyle">スタイル</span>

クラスセレクタ

.fontstyle {
  color:blue;
  font-size:16px;/*適応されるスタイル*/
}
span {
  color:red;
  font-size:18px;/*適応されないスタイル*/
}

属性セレクタ

[class="fontstyle"] {
  color:blue;
  font-size:16px;/*適応されるスタイル*/
}
span {
  color:red;
  font-size:18px;/*適応されないスタイル*/
}

擬似クラス

span:first-child {
  color:blue;
  font-size:16px;/*適応されるスタイル*/
}
span {
  color:red;
  font-size:18px;/*適応されないスタイル*/
}

クラスセレクタ・属性セレクタ・擬似クラスは同じ詳細度です。もしこの3つを設定した場合は、より後に記述されたものが適応されます。

要素セレクタ・擬似要素の記述

要素セレクタ・擬似要素はIDとclassより詳細度としては低いものとなっています。下記に記述例を示します。

<span id="fontstyle" class="fontstyle">スタイル</span>

要素セレクタ

span {
  color:blue;
  font-size:16px;
}
p {
  color:red;
  font-size:18px;
}

擬似要素

blockquote:before {
  content: "『";
}
blockquote:after {
  content: "』";
}

ユニバーサルセレクタ

*アスタリスクを使ってすべての要素に対するセレクタです。各ブラウザの初期スタイルをリセットする際に用いられ、詳細度は最も低いものとなっています。下記に記述例を示します。

* {
  margin: 0;
  padding: 0;
}

詳細度の考え方

各セレクタを組み合わせて記述することが多いと思います。組み合わせることで詳細度に変化が生まれます。
よく紹介されている各セレクタが持つ詳細度を数値化して合算することで計算して、「詳細度の数が大きい方が優先される」というのは間違いです。
「詳細度の位が高い方が優先される」、言い換えると「バージョン番号のように数値の大きいものが優先される
下記に詳細度の組み合わせについてのまとめを示します。

  • 要素セレクタの数量より1つのクラスセレクタが優先
  • クラスセレクタの数量より1つのIDセレクタが優先
  • 各セレクタの数量より1つのインラインや!imporantが優先

具体的な数値による詳細度の考え方

詳細順位 セレクタ名 詳細数値
1 !important 1.0.0.0.0
2 インライン記述(style属性) 0.1.0.0.0
3 idセレクタ 0.0.1.0.0
4 属性セレクタ・classセレクタ・擬似クラス 0.0.0.1.0
5 要素セレクタ・擬似要素 0.0.0.0.1
6 ユニバーサルセレクタ 0.0.0.0.0
*            {} /* a = 0, b = 0, c = 0, d = 0, 詳細度 = 0,0,0,0 -> specificity = 0.0.0.0.0 */
li           {} /* a = 0, b = 0, c = 0, d = 1, 詳細度 = 0,0,0,1 -> specificity = 0.0.0.0.1 */
ul li        {} /* a = 0, b = 0, c = 0, d = 2, 詳細度 = 0,0,0,2 -> specificity = 0.0.0.0.2 */
ul ol+li     {} /* a = 0, b = 0, c = 0, d = 3, 詳細度 = 0,0,0,3 -> specificity = 0.0.0.0.3 */
ul li:after  {} /* a = 0, b = 0, c = 0, d = 3, 詳細度 = 0,0,0,3 -> specificity = 0.0.0.0.3 */
.class       {} /* a = 0, b = 0, c = 1, d = 0, 詳細度 = 0,0,1,0 -> specificity = 0.0.0.1.0 */
li.class     {} /* a = 0, b = 0, c = 1, d = 1, 詳細度 = 0,0,1,1 -> specificity = 0.0.0.1.1 */
li a[href]   {} /* a = 0, b = 0, c = 1, d = 2, 詳細度 = 0,0,1,2 -> specificity = 0.0.0.1.2 */
a[href]:link {} /* a = 0, b = 0, c = 2, d = 1, 詳細度 = 0,0,2,1 -> specificity = 0.0.0.2.1 */
#id          {} /* a = 0, b = 1, c = 0, d = 0, 詳細度 = 0,1,0,0 -> specificity = 0.0.1.0.0 */
#id ul       {} /* a = 0, b = 1, c = 0, d = 1, 詳細度 = 0,1,0,1 -> specificity = 0.0.1.0.1 */
#id:not(p)   {} /* a = 0, b = 1, c = 0, d = 1, 詳細度 = 0,1,0,1 -> specificity = 0.0.1.0.1 */
style=""        /* a = 1, b = 0, c = 0, d = 0, 詳細度 = 1,0,0,0 -> specificity = 0.1.0.0.0 */
<body>
 <article>
  <section>
   <div id="a" class="a1 a2 a3 a3 a5 a6 a7 a8 a9 a10">
     <p>ほげほげ</p>
   </div>
  <section>
 <article>
<body>

/*適応されない*/
body article section .a1.a2.a3.a3.a5.a6.a7.a8.a9.a10  {} /* a = 0, b = 0, c = 0, d = 13, 詳細度 = 0,0,10,3 -> specificity = 0.0.0.10.3 */

/*適応される*/
#a       {} /* a = 0, b = 0, c = 1, d = 0, 詳細度 = 0,1,0,0 -> specificity = 0.0.1.0.0 */

詳細度は数としてとらえるのではなく、バージョン番号としてとらえて「バージョン1.1.10とバージョン1.2.1ではバージョン1.2.1のほうが新しい」というように詳細度においては優先順位が決まります。

詳細度の数値を求めてくれるサイトSpecificity Calculatorを使用することでどのセレクタが優先・適応されるのか簡単に調べることができます。

参考サイト

SNSでもご購読できます。

コメントを残す

*