メニュー

CSSの優先順位と詳細度の重みについて

その他
当ページのリンクには広告が含まれています。
  • URLをコピーしました！
生徒

CSSのスタイルが思った通りに効いてくれません

先生

CSSの優先順位のルールについて説明します

目次

CSSには優先順位のルールがある

WEBページを作るときに、CSSで指定したスタイルが思ったようにならないことがあります。

CSSには優先順位のルールがあり、ちゃんと理解していないと意図した見た目にできないです。

この記事では、CSSの優先順位のルールについて説明します。

この記事で分かること
  • CSSの優先度の仕組みとルール

CSSの優先度のルール

CSSには以下の優先度のルールがあり、同じ要素の同じプロパティが複数の箇所で指定されている場合、以下のルールでスタイルが適用されます。

  • 詳細度の値が大きい指定が有効になる
  • 詳細度が同じなら後から読み込まれた指定が有効になる

詳細度の値が大きい指定が有効

同じ要素の同じプロパティへの指定は、詳細度の値が大きい指定が有効になります。

後から読み込まれた内容が有効

同じ要素の同じプロパティに対して、詳細度が同じ指定が複数ある場合、後で読み込まれた指定が有効になります。

同じCSSファイルだと後ろに書かれている方、違うCSSファイルでは後で読み込まれたファイルの指定がなります。

詳細度について

CSSの要素の指定のしかたの詳しさを詳細度といいます。

指定方法ごとに詳細度の重みが決まっていて、詳細度の重みが一番大きな指定が有効になります。

詳細度の構成

詳細度はID、CLASS、TYPE ごとに重みの値を持つ形で構成されます。

同じ要素の同じプロパティについて、詳細度の重みの値が一番大きい指定が有効になります。

See the Pen CSS-Specificity by mik20621 (@mik20621) on CodePen.

詳細度の重みは合計される

各セレクタの詳細度の重みは合計されて、合計の値がそのセレクタの詳細度になります。

詳細度の重みの合計値が一番大きなセレクタの指定が有効になります。

See the Pen CSS-Specificity by mik20621 (@mik20621) on CodePen.

各指定方法の詳細度

CSSの各指定方法による詳細度の重みは以下のようになっています。

詳細度の重みについて

より絞り込んで具体的な指定のほうが詳細度の重みが大きくなります。

重みの値は、IDセレクタ＞CLASSセレクタ＞要素セレクタ となっています。

詳細度の重み例
１　important最大p { color: red; } !important;
２　HTMLのstyle属性で指定2番目<p style="color: red;">テキスト</p>
３　IDで指定1-0-0#text {
　color: red;
}
４　属性で指定0-1-0[type="password"] {
　color: red;
}
５　擬似クラス（一部を除く）0-1-0:focus {
　color: red;
}
６　CLASSで指定0-1-0.text {
　color: blue;
}
７　要素で指定0-0-1p {
　color: red;
}
８　擬似要素（全て）0-0-1::placeholder {
　color: red;
}
９　全称セレクタ0* {
　color: red;
}
!importantを指定

絶対に効かせたいCSSプロパティに指定

!important を付けたプロパティは、最優先で有効になります。

color: red !important; /* 優先度最大の指定 */

!importantはプロパティの値と末尾の;の間に書きます。

See the Pen CSS-important by mik20621 (@mik20621) on CodePen.

確実に効かせることができる

HTMLの要素が多くCSSの指定が複雑になってくると、思い通りにCSSが効かないことが出てきます。

そういった場合でも!importantを指定すると、確実に指定したCSSを効かせることができます。

CSSの管理が難しくなるので多用は避ける

他の指定を一切無視する!importantは、CSSの構成が理解しにくくなるデメリットがあります。

なるだけ!importantは使わずにセレクタの指定だけにして、どうしてもうまくいかない箇所にのみ使うようにしないと、CSSの運用が難しくなります。

同じ要素の同じプロパティに!importantを指定した場合、後で読み込まれた指定が有効になります。

HTMLのstyle属性で指定

CSSは、HTMLの要素の属性に記述することができます。

この指定は外部のCSSファイルやHTML内の<style>タグ内での指定よりも優先されます。

See the Pen CSS-nth-child by mik20621 (@mik20621) on CodePen.

!importantがCSSで指定されている場合は、style属性の指定よりも優先されます。

IDで指定

#に続けて、要素のid属性の値を書いて、スタイルを指定します。

詳細度の重み付けは1-0-0でCLASS指定や要素指定よりも優先されます。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

属性で指定

[type="input"]など[属性]のセレクタでスタイルを指定します。

詳細度の重み付けは0-1-0で、ID指定と要素指定の間の優先度になります。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

CLASSで指定

要素のclassを指定して.クラス名でスタイルを指定します。

詳細度の重み付けは0-1-0で、ID指定と要素指定の間の優先度になります。

See the Pen CSS-class by mik20621 (@mik20621) on CodePen.

擬似クラス（一部除く）

:hover や:disabledなど擬似クラスのセレクタでスタイルを指定します。

詳細度の重み付けは0-1-0で、優先度はクラス指定と同じです。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

詳細度の重みを持たない擬似クラス

:is(),:not(),:has()は擬似クラスですが、詳細度の重みを持ちません。

ただし、引数のセレクタは詳細度の重みを持ちます。

カンマ区切りで引数が複数指定されている場合、引数の中で一番大きな詳細度の重みの値になります。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

:where() も詳細度の重みを持たない擬似クラスで、引数の詳細度の重みも考慮されません。

:is()と:where()の違いは引数の詳細度の重みだけです。

See the Pen CSS-where by mik20621 (@mik20621) on CodePen.

要素で指定

pやdivなどHTMLのセレクタでスタイルを指定します。

詳細度の重み付けは0-0-1でID指定やCLASS指定よりも優先度は劣ります。

See the Pen CSS-class by mik20621 (@mik20621) on CodePen.

擬似要素（全て）

::beforeや::placeholderなど疑似要素セレクタの詳細度の重み付けは0-0-1で要素セレクタと同じです。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

全称セレクタ

* {　}の全称セレクタは詳細度の重みを持たず0-0-0です。

See the Pen CSS-Universal by mik20621 (@mik20621) on CodePen.

詳細度を確認できるWEBサービス

CSSのサイズが大きくなってくると、セレクタが複雑になり詳細度の把握が難しくなってきます。

そういった時に、以下のようなサイトを利用すれば、記入したセレクタの詳細度の重みを簡単に確認できます。

Specificity Calculator
CSSBootcamp.com
CSS Specificity Calculator Provide a CSS selector to get its specificity value.
その他
よかったらシェアしてね！
  • URLをコピーしました！
目次