- Coding Methodology
- 第101回 CSSの優先順位とセレクタ指定の詳細度
第101回 CSSの優先順位とセレクタ指定の詳細度
CMS やフレームワークによって指定されたスタイルを変更したいときや、サイトを運用する際にスタイルの調整が必要な場合、知らないと困るCSS の優先順位。今回は「スタイルシートの優先順位」「セレクタの詳細度の計算方法」とあわせて、便利なツールを紹介します。
指定元による優先順位と!important
図1：スタイルシートの優先順位
スタイルシートの指定元によって、スタイルの優先順位は異なります。（図1）優先順位のより高いスタイルが、ブラウザなどで表示されます。
「ユーザーエージェント」」とは、主にブラウザに指定されているデフォルトのスタイルシートで、見出しの文字サイズが大きくなっていたり、<p> 要素の上に余白が付いていたりします。
「ユーザー」」とは、サイト閲覧者が独自に作成したスタイルシートで、対応ブラウザに設定することで、スタイルが適用されます。（図2）
図2：ユーザースタイルシートの設定
Internet Explorerなら、「インターネットオプション > 全般 > ユーザー補助」から設定が可能。
「制作者」」とは、「制作者」とは、Web サイト制作時に、コーダーが書くCSSです。また、指定元に!importantをつけると、優先順位は逆転します。
コーディングの際、reset.cssを利用することがよくありますが、これは「ユーザーエージェント」のスタイルシートに記載された要素のスタイルを、「制作者」のスタイルシートで上書きしている状態です。
セレクタの指定による詳細度と計算方法
表1：セレクタの点数表
セレクタの詳細度でもCSSの優先順位は変わります。
表1 はセレクタの持つ点数を分類したものです。該当のセレクタが1つあれば、各桁に「1」追加されます。点数が高いほど、CSSの優先順位があがります。また、CSS3からセレクタの計算方法が4桁から3桁に変更となりました。4桁目はインラインスタイルかどうかの判定（インラインなら1追加）のみでしたが、これが計算式から除外されています。ちなみに、!importantを宣言すると、読み込んでいるスタイルが無条件に上書きされますが、詳細度とは無関係です。
次の2つの指定の計算結果は、どちらも「111」です。
- #contents .ttl-level-01::before
- #nav li:first-child
計算結果が全く同じ数値の場合は、後から書いたものの優先順位が高くなります。
否定擬似クラス「:not」と全称セレクタ「*」
本来疑似クラスは2桁目に計算されますが、「:not」だけは対象外です。
但し「:not」の中に書かれたセレクタは、通常のセレクタにあてはめて計算されます。
また、全称セレクタの「*」は0 点です。
詳細度が一瞬でわかる「Specificity Calculator」
点数表を覚えていなくても、「Specificity Calculator」というオンラインツールを使用すると、簡単に詳細度を確認することができます。使い方は、確認したいセレクタの指定を1 行入力するだけ。入力エリアが追加できるので、複数の指定方法を比較するときにも便利です。
思いどおりにスタイルが適用できないときは、ツールなどを活用してスタイルシートの優先順位やセレクタの詳細度を確認してみましょう。
