CSSの優先順位

HTML&CSS

CSS優先順位

CSSの優先順位は以下で決まります。

  1. セレクタの種類・書き方
  2. 指定の順番
  3. スタイルシートの種類(ブラウザ側・ユーザー側・制作者側)
  4. !important指定

セレクタの種類・書き方について

セレクタの種類には、

  1. IDセレクタ
  2. classセレクタ
  3. 疑似classセレクタ、classセレクタ
  4. 要素セレクタ
  5. 疑似要素セレクタ
  6. 全称セレクタ

の5つがあり以下のような優先度になります。

IDセレクタ > classセレクタ = 疑似classセレクタ(hoverなど) > 要素セレクタ(pなど) = 疑似要素セレクタ(beforeとかafterなど)> 全称セレクタ(*)

セレクタには子孫セレクタの設定など、個別性が高いセレクタ程、優先度が高くなります。

セレクタの優先度算出方法
セレクタ A B C D 優先度
* 0 0 0 0 0000
p 0 0 0 1 0001
p strong 0 0 0 2 0002
p .section 0 0 1 1 0011
#content p .section 0 1 1 1 0111
div#content p .section 0 1 1 1 0112
スタイル属性(<p style=”width:100px”>~</p>など) 1 0 0 0 1000

CSSの優先順位

セレクタの計算に基いて算出された優先度が同じ数値になった場合は、後ろに指定されたものが優先されます。

また、スタイルシートには、ブラウザ側・ユーザー側・制作者側の3種類があります。そして、それぞれの優先度は以下のとおりです。

  1. !important宣言付きのユーザースタイル
  2. !important宣言付きの制作者スタイル
  3. 制作者スタイル
  4. ユーザースタイル
  5. UA(ブラウザなど)のデフォルトスタイル

プロパティの値に、”!important”と指定することで指定したプロパティを最優先にすることができます。

div.section {
   color: #f00 !important;
}

子孫セレクタで個別性の高い指定例えば #localPage #pageBody #pageTop #contentsWrap #contents h3 といったセレクタの指定をするとむやみにクラスやIDを指定しなくて済みます。けれども優先度の問題で思わぬところでCSSの設定が思い通りにいかなくなるケースがみられます。子孫セレクタでIDが複数含まれたセレクタが優先度が高く単一のclassで指定したはずのセレクタが負けてしまうケースなどです。どうやってもあるセレクタにCSSが効かない時など大体優先順位で負けているからだと思うと良いかもしれません。

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました