BOOKS
by Sukeharu Kano / 狩野祐東 著書

意外と知らないCSSカスケード(4)セレクタによる優先順位の計算

2013-06-07

カスケード順序(1)作成者/ユーザー/UA CSS」で記したとおり、CSSには3つの出所があります。そして、それら3つのCSSは、UA→ユーザー→作成者CSSの順に適用されます。出所の違うそれぞれのCSSには、当然のことながら複数のルールが記述されています。これらのルールは、セレクタによって適用する優先順位が決まります。

スラスラわかるHTML&CSSのきほん』p.165〜167

セレクタによる優先順位の計算方法

 セレクタを記述する際、要素名(タグ名)やタグの属性を使用します。要素名や属性には点数が付いていて、その合計点がセレクタの優先順位になります。それぞれの点数は次のとおりです。

  • タグのstyle属性によるスタイル指定 = 1,000点
  • id属性 = 100点加算
  • id属性以外の属性および擬似クラス = 10点加算
  • 要素名および擬似要素 = 1点加算
  • 全称セレクタ = 0点

 例を示します(この例は次のドキュメントより一部改変の上引用。Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 6.4.3 Calculating a selector’s specificityW3C)。

*              {}  /* 0 点(全称セレクタ) */
li             {}  /* 1 点(要素名) */
li:first-line  {}  /* 1 + 1 = 2 点(全称セレクタ + 擬似要素CSS2.1) */
li::first-line {}  /* 1 + 1 = 2 点(全称セレクタ + 擬似要素CSS3) */
ul li          {}  /* 1 + 1 = 2 点(要素名 + 要素名) */
ul ol+li       {}  /* 1 + 1 + 1 = 3 点(要素名 + 要素名 + 要素名) */
h1 + *[rel=up] {}  /* 1 + 0 + 10 = 11 点(要素名 + 全称セレクタ + 属性) */
ul ol li.red   {}  /* 1 + 1 + 1 + 10 = 13 点(要素名 + 要素名 + 要素名 + 属性) */
li.red.level   {}  /* 1 + 10 + 10 = 21 点(要素名 + 属性 + 属性) */
#x34y          {}  /* 100 点(id属性) */
style=""           /* 1000 点(style属性) */

 という計算をして、点数が高いほうが優先順位が高くなります。点数が同じルールが複数ある場合、後から出てきたほうのルールが適用されます。
 自分でCSSを記述していて、「なぜこれは適用されないんだろう?」ということがときどきあります。そういうときはセレクタの優先順位が問題になっていることが多いです。計算方法を覚えておいて、問題が起きたときは思い出してみてください。

参考文献:
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 6.4.3 Calculating a selector’s specificityW3C