スタイルシートの優先順位（計算方法）

Tweet

Category css 2009/10/07

スタイルシートの優先順についてです。

CSS仕様書はこちら
http://www.w3.org/TR/CSS21/cascade.html#specificity

仕様書に”specificity”とありますが、要素をより特定した形で書かれた指定が優先ということです。

個別性など訳されていたりします。

優先順位に影響を与えるもの

スタイルシートの優先順位に影響を与えるものは以下の4つです。

1. セレクタの種類・書き方
2. 指定の順序
3. スタイルシートの種類（ブラウザ側・ユーザー側・制作者側）
4. !important指定

セレクタの種類・書き方について

セレクタの種類には、次の5つがあります。

• IDセレクタ
• classセレクタ
• 疑似classセレクタ
• 要素セレクタ
• 疑似要素セレクタ
• 全称セレクタ

優先度は以下のとおり。

IDセレクタ > classセレクタ = 疑似classセレクタ > 要素セレクタ = 疑似要素セレクタ > 全称セレクタ

計算方法

セレクタの優先度の算出方法は次のとおり。優先度の数値が高いほど優先されます。

• A. HTMLにstyle=””で指定
• B. IDセレクタの数
• C. classセレクタ・擬似classセレクタの数
• D. 要素セレクタ・疑似要素の数

→ 複雑なところはこの順位計算のところだけです。

指定の順序について

上記のセレクタの計算に基いて算出された優先度が同じ数値になった場合は、後ろに指定されたものが優先。
→ 後の指定で上書き。これは簡単。

スタイルシートの種類（ブラウザ側・ユーザー側・制作者側）について

スタイルシートには、ブラウザ側・ユーザー側・制作者側の3種類がある。
優先度は、制作者側 > ユーザー側 > ブラウザ側。
→ 「* {margin:0;padding:0;}」のような、ブラウザのデフォルトを打ち消す指定を仕込んでおけば、
  後は特に考えないといけない場合は少ない。
  ユーザー側で何かしている場合は、考慮しないでよいと思う。

!important指定について

スタイルプロパティに、”!important”と指定することで指定したプロパティを最優先にすることができる。
→ スタイルシートがややこしくなるので、使わないならそれに越したことはないと思ってます。

まとめ

暗記しなくてもよいので、「要素をより特定した形で書かれた指定が優先」と覚えておけば大丈夫。