コーディングメソドロジー

第101回 CSSの優先順位とセレクタ指定の詳細度

CMS やフレームワークによって指定されたスタイルを変更したいときや、サイトを運用する際にスタイルの調整が必要な場合、知らないと困るCSS の優先順位。今回は「スタイルシートの優先順位」「セレクタの詳細度の計算方法」とあわせて、便利なツールを紹介します。

指定元による優先順位と!important

図1:スタイルシートの優先順位

図1:スタイルシートの優先順位

スタイルシートの指定元によって、スタイルの優先順位は異なります。(図1)優先順位のより高いスタイルが、ブラウザなどで表示されます。

ユーザーエージェント」」とは、主にブラウザに指定されているデフォルトのスタイルシートで、見出しの文字サイズが大きくなっていたり、<p> 要素の上に余白が付いていたりします。

ユーザー」」とは、サイト閲覧者が独自に作成したスタイルシートで、対応ブラウザに設定することで、スタイルが適用されます。(図2)

図2:ユーザースタイルシートの設定

図2:ユーザースタイルシートの設定

Internet Explorerなら、「インターネットオプション > 全般 > ユーザー補助」から設定が可能。

制作者」」とは、「制作者」とは、Web サイト制作時に、コーダーが書くCSSです。また、指定元に!importantをつけると、優先順位は逆転します。

コーディングの際、reset.cssを利用することがよくありますが、これは「ユーザーエージェント」のスタイルシートに記載された要素のスタイルを、「制作者」のスタイルシートで上書きしている状態です。

セレクタの指定による詳細度と計算方法

表1:セレクタの点数表

表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 行入力するだけ。入力エリアが追加できるので、複数の指定方法を比較するときにも便利です。

http://specificity.keegan.st/

思いどおりにスタイルが適用できないときは、ツールなどを活用してスタイルシートの優先順位やセレクタの詳細度を確認してみましょう。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム