CSS優先順位の実例とまとめ
CSS適用の優先順位を調べていく過程で、理解できていないルールがあったのでメモ。
参考にしたドットインストール CSS入門 #18に、動画での解説もあります。
実例
以下のサンプルコードのp要素に対する指定を例に見ていきます。優先順位の低いものから。
要点だけを知りたい方は、まとめに飛んでください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLサンプル</title> <style type="text/css"> /* 以下に切り出し */ </style> </head> <body> <p id="sampleId" class="sampleClass" title="sampleTitle">これはサンプルです。</p> <ul> <li>foo</li> <li>bar</li> </ul> </body> </html> |
後から書いた方が優先
この場合、p要素は、greenになります。これはセレクタが、要素（タグ）でもidでもclassでも同様です。
1 2 3 4 5 6 | p { color: red; } p { color: green; } |
class指定したものが優先（classセレクタ）
この場合、p要素は、redになります。たとえ後からの指定であったとしてもです。
1 2 3 4 5 6 | .sampleClass { color: red; } p { color: green; } |
属性を指定したものが優先（属性セレクタ）
この場合、p要素は、redになります。
1 2 3 4 5 6 | [title="sampleTitle"] { color: red; } p { color: green; } |
クラスセレクタの優先順位と同レベルです。
つまり、以下のように書いた場合は、「後から書いた方が優先」のルールが適用されるので、p要素は、greenになります。
1 2 3 4 5 6 | [title="sampleTitle"] { color: red; } .sampleClass { color: green; } |
疑似セレクタを指定したものが優先（疑似セレクタ）
この場合、liの最初の要素（文字列foo）は、redになります。クラスセレクタ、属性セレクタの優先順位と同レベルです。
1 2 3 4 5 6 | li:first-child { color: red; } li { color: green; } |
詳細に指定した方が優先
この場合、p要素は、redになります。
※このルールを知りませんでした。厳密に言うと「詳細に指定した方が優先」というルールではないです。この解説は、後半で詳しく。
1 2 3 4 5 6 | p.sampleClass { color: red; } .sampleClass { color: green; } |
id指定したものが優先（idセレクタ）
この場合、p要素は、redになります。classよりidが優先です。
1 2 3 4 5 6 | #sampleId { color: red; } .sampleClass { color: green; } |
要素に直接指定したものが優先（インラインスタイル）
この場合、p要素は、blueになります。classセレクタや、idセレクタで指定されていたとしてもです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLサンプル</title> <style type="text/css"> .sampleClass { color: red; } p#sampleId { color: green; } </style> </head> <body> <p id="sampleId" class="sampleClass" title="sampleTitle" style="color: blue;">これはサンプルです。</p> </body> </html> |
!importantをつけたものが優先
この場合、p要素は、redになります。インラインスタイルで指定されてようが、id指定されてようがです。
1 2 3 4 5 6 | p { color: red !important; } p#sampleId { color: green; } |
まとめ
今回の例をまとめると優先順位は以下の通りとなります。
- !important指定したもの
- インラインスタイルで指定したもの
- idセレクタで指定したもの
- classセレクタ、属性セレクタ、疑似セレクタで指定したもの
- 要素セレクタ（エレメントセレクタ）で指定したもの
- 後から書いたもの
- ユニバーサルセレクタで指定したもの
ユニバーサルセレクタ（全称セレクタ）は、*{}という形式で指定するもの
CSS適用のルールは、ポイント獲得をイメージするとわかりやすいです。ポイントの重みは、以下の表の通りです。
| インラインスタイル | idセレクタ | classセレクタ、属性セレクタ、疑似セレクタ | 要素セレクタ |
|---|---|---|---|
| 1 | 1 | 1 | 1 |
idセレクタとインラインスタイルが同時に指定されている場合
idセレクタは0100ポイント、インラインスタイルは1000ポイントになるので、インラインスタイルの方が優先されます。
詳細に指定した方が優先になる理由
ドットインストール CSS入門 #18の動画では、詳細に指定した方が優先という紹介のされ方でしたが、これを解説すると次の通りです。
1 2 3 4 5 6 7 8 | /* 指定1 */ p.sampleClass { color: red; } /* 指定2 */ .sampleClass { color: green; } |
指定1は、要素セレクタとクラスセレクタで指定されているので0011ポイント、指定2は、クラスセレクタの指定だけなので0010ポイント、つまり指定1の方がポイントが多いので優先されるというわけです。
ポイントが同じだった場合の例
上でも例を挙げましたが、同レベルの指定の場合を見てみましょう。
1 2 3 4 5 6 7 8 | /* 指定1 */ [title="sampleTitle"] { color: red; } /* 指定2 */ .sampleClass { color: green; } |
この場合、指定1は、0010ポイント、指定2は、0010ポイントとなります。ポイントが同一なので、その下位のルール「後から書いた方が優先」が適用されます。
ルールを理解すれば、簡単ですね！慣れない場合は、ポイント獲得をビジュアルで確認できるサイトSpecificity Calculatorが便利です。
参考
3分間動画で、ざっくり確認したい場合は、ドットインストール CSS入門 #18で。
ポイント獲得の解説は、以下のサイトが参考になります。
その他、ブラウザに設定できるユーザスタイルシートの優先順位のまとめは、以下のサイトで紹介されています。
要素に直接!important指定するのが優先順位が高く、それより!important指定されたユーザスタイルシートが優先順位が高いってところですかね。