interestsCSS適用の優先順位を調べていく過程で、理解できていないルールがあったのでメモ。#18に、動画での解説もあります。以下のサンプルコードのp要素に対する指定を例に見ていきます。優先順位の低いものから。要点だけを知りたい方は、まとめに飛んでください。title="sampleTitle">これはサンプルです。title="sampleTitle">これはサンプルです。</p><ul><li>foo</li><li>bar</li></ul></body></html>後から書いた方が優先この場合、p要素は、greenになります。これはセレクタが、要素(タグ)でもidでもclassでも同様です。green;}class指定したものが優先(classセレクタ)この場合、p要素は、redになります。後からの指定であったとしてもです。green;}属性を指定したものが優先(属性セレクタ)この場合、p要素は、redになります。green;}クラスセレクタの優先順位と同レベルです。以下のように書いた場合は、「後から書いた方が優先」のルールが適用されるので、p要素は、greenになります。green;}疑似セレクタを指定したものが優先(疑似セレクタ)この場合、liの最初の要素(文字列foo)は、redになります。クラスセレクタ、属性セレクタの優先順位と同レベルです。green;}詳細に指定した方が優先この場合、p要素は、redになります。※このルールを知りませんでした。厳密に言うと「詳細に指定した方が優先」というルールではないです。この解説は、後半で詳しく。green;}id指定したものが優先(idセレクタ)この場合、p要素は、redになります。classよりidが優先です。green;}要素に直接指定したものが優先(インラインスタイル)この場合、p要素は、blueになります。classセレクタや、idセレクタで指定されていたとしてもです。blue;">これはサンプルです。blue;">これはサンプルです。</p></body></html>!importantをつけたものが優先この場合、p要素は、redになります。インラインスタイルで指定されてようが、id指定されてようがです。green;}まとめ今回の例をまとめると優先順位は以下の通りとなります。!important指定したものインラインスタイルで指定したものidセレクタで指定したものclassセレクタ、属性セレクタ、疑似セレクタで指定したもの要素セレクタ(エレメントセレクタ)で指定したもの後から書いたものユニバーサルセレクタで指定したものユニバーサルセレクタ(全称セレクタ)は、*{}という形式で指定するものCSS適用のルールは、ポイント獲得をイメージするとわかりやすいです。ポイントの重みは、以下の表の通りです。1idセレクタとインラインスタイルが同時に指定されている場合idセレクタは0100ポイント、インラインスタイルは1000ポイントになるので、インラインスタイルの方が優先されます。#18の動画では、詳細に指定した方が優先という紹介のされ方でしたが、これを解説すると次の通りです。green;}指定1は、要素セレクタとクラスセレクタで指定されているので0011ポイント、指定2は、クラスセレクタの指定だけなので0010ポイント、つまり指定1の方がポイントが多いので優先されるというわけです。上でも例を挙げましたが、同レベルの指定の場合を見てみましょう。green;}この場合、指定1は、0010ポイント、指定2は、0010ポイントとなります。ポイントが同一なので、その下位のルール「後から書いた方が優先」が適用されます。Calculatorが便利です。ポイント獲得の解説は、以下のサイトが参考になります。Calculatorその他、ブラウザに設定できるユーザスタイルシートの優先順位のまとめは、以下のサイトで紹介されています。要素に直接!important指定するのが優先順位が高く、それより!important指定されたユーザスタイルシートが優先順位が高いってところですかね。