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

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

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

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 */

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

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での指定が最優先されています。

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

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

順番を入れ替えて。

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

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

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

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

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

順番を入れ替えて。

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

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

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

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 */

順番を入れ替えて。

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（要素単体）

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