2020-01-07 更新

要素やid、class、roleなどでスタイルを指定した際の優先順位について

CSSで同じ要素に対して、要素単体やid、class、roleなどでスタイルを定義した際にどれが優先的に設定されるのかよくわかっていなかったので、実際に設定して確認してみました。

目次

  • 要素単体、id、class、roleでスタイル指定
  • 要素単体、class、roleでスタイル指定
  • 要素ありとなしのclassでスタイル指定
  • !importantでスタイル指定
  • まとめ

要素単体、id、class、roleでスタイル指定

同じ要素に対して、要素単体、id、class、roleにそれぞれ異なる背景色を設定して表示してみました。

テスト1-1

div{background-color:gray;}                 /* 要素単体 */
div#example-id{background-color:red;}       /* id */
div.example-class{background-color:green;}  /* class */
div[role=article]{background-color:blue;}   /* role */

各スタイルの定義する順序を入れ替えた場合。

テスト1-2

div[role=article]{background-color:blue;}   /* role */
div.example-class{background-color:green;}  /* class */
div#example-id{background-color:red;}       /* id */
div{background-color:gray;}                 /* 要素単体 */

定義の順序に関係なく、idでの指定が最優先されています。

要素単体、class、roleでスタイル指定

続いてidを除いて指定してみました。

テスト2-1

div{background-color:gray;}                 /* 要素単体 */
div.example-class{background-color:green;}  /* class */
div[role=article]{background-color:blue;}   /* role */

順番を入れ替えて。

テスト2-2

div[role=article]{background-color:blue;}   /* role */
div.example-class{background-color:green;}  /* class */
div{background-color:gray;}                 /* 要素単体 */

idでのスタイル指定があった時とは違って、classまたはroleで指定したスタイルの内、後で定義した方が表示されます。

roleは単純に要素の属性として指定しているだけなのでrole以外も同様の挙動になると思います。

要素ありとなしのclassでスタイル指定

classの要素ありとなしの場合。

テスト3-1

div{background-color:gray;}                 /* 要素単体 */
div.example-class{background-color:green;}  /* class(要素指定あり) */
.example-class{background-color:blue;}      /* class(要素指定なし) */

順番を入れ替えて。

テスト3-2

.example-class{background-color:blue;}      /* class(要素指定なし) */
div.example-class{background-color:green;}  /* class(要素指定あり) */
div{background-color:gray;}                 /* 要素単体 */

要素ありとなしでは「あり」の方が優先されます。

!importantでスタイル指定

!importantの挙動は知っていますが念のため。

テスト4-1

div{background-color:black !important;}     /* 要素単体(!important指定あり) */
div{background-color:gray;}                 /* 要素単体 */
div#example-id{background-color:red;}       /* id */
div.example-class{background-color:green;}  /* class */
div[role=article]{background-color:blue;}   /* role */

順番を入れ替えて。

テスト4-2

div[role=article]{background-color:blue;}   /* role */
div.example-class{background-color:green;}  /* class */
div#example-id{background-color:red;}       /* id */
div{background-color:gray;}                 /* 要素単体 */
div{background-color:black !important;}     /* 要素単体(!important指定あり) */

これまでの経験上、「!important」は最終手段って感じで利用しています。

まとめ

スタイルを指定する要素がdivの場合、優先順位は以下のようになります。(上が高く、下が低い)

  • !important
  • div#id
  • #id
  • div.class、div[attribute=value]・・・スタイル定義順の後勝ち
  • .class、[attribute=value]・・・スタイル定義順の後勝ち
  • div(要素単体)

なお、上記の優先順位については、各ブラウザでの挙動の違いはありませんでした。

CSS】関連記事