CSS優先順位の実例とまとめ


CSS適用の優先順位を調べていく過程で、理解できていないルールがあったのでメモ。
参考にしたドットインストール CSS入門 #18に、動画での解説もあります。

実例

以下のサンプルコードのp要素に対する指定を例に見ていきます。優先順位の低いものから。
要点だけを知りたい方は、まとめに飛んでください。

後から書いた方が優先

この場合、p要素は、greenになります。これはセレクタが、要素(タグ)でもidでもclassでも同様です。

class指定したものが優先(classセレクタ)

この場合、p要素は、redになります。たとえ後からの指定であったとしてもです。

属性を指定したものが優先(属性セレクタ)

この場合、p要素は、redになります。

クラスセレクタの優先順位と同レベルです。
つまり、以下のように書いた場合は、「後から書いた方が優先」のルールが適用されるので、p要素は、greenになります。

疑似セレクタを指定したものが優先(疑似セレクタ)

この場合、liの最初の要素(文字列foo)は、redになります。クラスセレクタ、属性セレクタの優先順位と同レベルです。

詳細に指定した方が優先

この場合、p要素は、redになります。
※このルールを知りませんでした。厳密に言うと「詳細に指定した方が優先」というルールではないです。この解説は、後半で詳しく

id指定したものが優先(idセレクタ)

この場合、p要素は、redになります。classよりidが優先です。

要素に直接指定したものが優先(インラインスタイル)

この場合、p要素は、blueになります。classセレクタや、idセレクタで指定されていたとしてもです。

!importantをつけたものが優先

この場合、p要素は、redになります。インラインスタイルで指定されてようが、id指定されてようがです。

まとめ

今回の例をまとめると優先順位は以下の通りとなります。

  1. !important指定したもの
  2. インラインスタイルで指定したもの
  3. idセレクタで指定したもの
  4. classセレクタ、属性セレクタ、疑似セレクタで指定したもの
  5. 要素セレクタ(エレメントセレクタ)で指定したもの
  6. 後から書いたもの
  7. ユニバーサルセレクタで指定したもの

ユニバーサルセレクタ(全称セレクタ)は、*{}という形式で指定するもの

CSS適用のルールは、ポイント獲得をイメージするとわかりやすいです。ポイントの重みは、以下の表の通りです。

インラインスタイルidセレクタclassセレクタ、属性セレクタ、疑似セレクタ要素セレクタ
1111

idセレクタとインラインスタイルが同時に指定されている場合

idセレクタは0100ポイント、インラインスタイルは1000ポイントになるので、インラインスタイルの方が優先されます。

詳細に指定した方が優先になる理由

ドットインストール CSS入門 #18の動画では、詳細に指定した方が優先という紹介のされ方でしたが、これを解説すると次の通りです。

指定1は、要素セレクタとクラスセレクタで指定されているので0011ポイント、指定2は、クラスセレクタの指定だけなので0010ポイント、つまり指定1の方がポイントが多いので優先されるというわけです。

ポイントが同じだった場合の例

上でも例を挙げましたが、同レベルの指定の場合を見てみましょう。

この場合、指定1は、0010ポイント、指定2は、0010ポイントとなります。ポイントが同一なので、その下位のルール「後から書いた方が優先」が適用されます。

ルールを理解すれば、簡単ですね!慣れない場合は、ポイント獲得をビジュアルで確認できるサイトSpecificity Calculatorが便利です。

参考

3分間動画で、ざっくり確認したい場合は、ドットインストール CSS入門 #18で。

ポイント獲得の解説は、以下のサイトが参考になります。

その他、ブラウザに設定できるユーザスタイルシートの優先順位のまとめは、以下のサイトで紹介されています。

要素に直接!important指定するのが優先順位が高く、それより!important指定されたユーザスタイルシートが優先順位が高いってところですかね。