More than 3 years have passed since last update.

CSS適用の優先順位

Last updated at 2020-12-17Posted at 2020-12-17

#はじめに
適用順序の備忘録。

##指定元による優先順位

CSSの指定は、制作者以外にもユーザー、ブラウザのデフォルトのスタイルシートからも指定できる。
→(ブラウザのデフォルトスタイルシートは自動で適用される)
これ以外の指定元も存在するが、基本的な指定元は下記。

###CSSの指定が競合した場合

####基本的な優先順位

制作者の指定 > ユーザー > ユーザエージェント

!importantで優先順位を高くする
「制作者」「ユーザ」「ユーザエージェント」の指定元による優先順位は、CSSの宣言(プロパティ:値)の後ろに
[!important」を追加することで優先順位の変更ができる。

p {
  color: #FFF; !important;
}

!importantを付けた場合の優先順位 (降順)

ユーザーエージェント !iportatnt付き

ユーザー　!importatnt付き

制作者　!important付き

制作者

ユーザー

ユーザーエージェント

同じ指定元の中での競合の場合、後の指定が優先される(詳細度が同じ場合)
!importantをつけると順序や詳細度にかかわらず同じ指定元内でも優先される。

####詳細度 Specificity
詳細の度合い。
要素の種類だけで指定するセレクタは詳細度は低く、IDで1つの要素を限定的に指定するセレクタの詳細度は高くなる。

##セレクタの詳細度による優先順位の計算方法
CSS3では3桁の数字で計算する。
CSS2.1までは4桁だったが、無くなった1桁はstyle属性による指定かどうかを判定するもので、
style属性であれば無条件に詳細度が最も高くなる仕様になった為、計算対象外になった。

セレクタの中に含まれるシンプルセレクタの種類ごとの個数を次のように各桁に入れる。
この3桁の数値が大きいものほど詳細度が高い。

1桁目
要素系のセレクタの個数
・要素名タイプセレクタの個数
・疑似要素の個数 ::xxx
2桁目
属性系のセレクタの個数
・クラスセレクタの個数 .xxx
・属性セレクタの個数　xxx
・疑似クラスの個数　:xxx

3桁目
IDセレクタの個数　#xxx

数字は
3桁目 2桁目 1桁目

####例外
ユニバーサルセレクタ(*)は、詳細度に関係ない、
疑似クラス :not()は()内にあるセレクタは個数に加えますが、:not()自体は個数には加えない。

###セレクタとその詳細度の例(降順)

詳細度を示す3桁の数値は、各桁がいくつになっても繰り上がらない。詳細度が低くても!importantがつけば最優先。