CSS(スタイル)の優先順位を決める要因-CSS –

cssの優先順位

CSSが複雑になってくると、予想と違う表示になる場合があります。

それは、HTMLドキュメントに適用されるスタイルの友禅順位の勘違いが原因になることが多いです。

CSSの優先順位を決める項目は何か

HTMLドキュメントでは以下の項目を複合的に考えてスタイルを適用する順位を決定しています。

各項目の詳細については本記事内「順位決定項目について」で説明します。

CSSの設定(定義)者
CSSの指定は標準でブラウザが指定している「デフォルトスタイルシート」のほかに、ホームページ製作者が指定する「製作者スタイルシート」、閲覧者によって指定された「ユーザースタイルシート」があります。
設定者別では「製作者スタイルシート」が優先され、「ユーザースタイルシート」「デフォルトスタイルシート」の順位になります。
セレクタの種類(得点)
セレクタはクラス名、id名で指定するなど多くの種類や複数のセレクタで指定することも可能ですので、各セレクタごとに点数が割り振られており、その得点(詳細度)が高いセレクタの宣言が優先的に適用されます。
※クラス区分などの関係上、得点のみで全てが判断されるわけではありません。
CSSの適用方法
CSSをHTMLドキュメントに適用させるには「外部のCSSファイルを読み込む」「<head>タグ内に<style>タグで指定」「style属性で指定」があります。
優先順位は「style属性で指定」が優先され他の2つの方法に関しては順位は同じになります。ファイルを読み込む順と<style>タグでの指定を併用する場合は、【記述位置】のルールで順位が決定します。基本的な記述は外部ファイルを読み込んだ後に<style>タグを記述することが多いと思われますので、その場合は<style>タグ内の宣言が優先されます。
記述位置
同じセレクタを定義している場合は、後に記述した宣言を適用します。
!importantの有無
CSSは基本的には上記までのルールで順位を決定しています。しかし、「!important」を付けることで指定した宣言の順位をルールに関係なく最優先順位にすることができます。

適用されるCSSの優先順位

基本的な順位

優先順位を決める項目は大きく分けて5種類ですがそれぞれを組み合わせるとかなりの種類になります。以下が基本的な優先順位になります。

ブラウザのバージョンによって多少の違いはあります。

  1. !importantの有無
  2. style属性で指定(各要素に個別指定)
  3. 設定(定義)者別
  4. セレクタの種類(得点)
  5. 記述位置

組合せごとの順位

各項目を組み合わせた場合の優先順位は以下表となります。優先順位は上がもっとも高く下にいくごとに低くなります。

!important有り style属性で指定 記述位置が後
記述位置が前
製作者CSS セレクタの得点が高い 記述位置が後
記述位置が前
セレクタの得点が低い 記述位置が後
記述位置が前
ユーザーCSS セレクタの得点が高い 記述位置が後
記述位置が前
セレクタの得点が低い 記述位置が後
記述位置が前
!important無し style属性で指定 記述位置が後
記述位置が前
製作者CSS セレクタの得点が高い 記述位置が後
記述位置が前
セレクタの得点が低い 記述位置が後
記述位置が前
ユーザーCSS セレクタの得点が高い 記述位置が後
記述位置が前
セレクタの得点が低い 記述位置が後
記述位置が前
デフォルトCSS

継承と優先順位を勘違いしているーヒントー

「継承」とは親要素に指定した値が子要素にも適用されることを言います。

親要素に高得点のセレクタでcolor:redの指定をし、子要素のセレクタでcolorの宣言をしていない場合は子要素のcolorプロパティにredが継承されます。
しかし、子要素のセレクタ(得点は低い)でcolor:greenを指定した場合は、子要素のcolorはgreenになります。

継承する

得点が優先されるという観点から考えると親要素のredが表示されると思いますが、「得点の高さに関わらず対象の要素に同じプロパティの宣言がある場合には、親要素の値は継承されない」ので子要素のcolorはgreenで表示されます。

順位決定項目について

各項目別に適用される手順、事項は以下の通りです。

1.!importantについて

「!important」を付けた宣言は順位決定ルールに関係なく最優先に適用されます。

important指定

2.設定(定義)者別の順位について

設定者別の優先順位は、ホームページ製作者が指定するCSS「製作者スタイルシート」、閲覧者によって指定された「ユーザースタイルシート」、「デフォルトスタイルシート」になります。

スタイルの適用されかたは、「デフォルトスタイルシート」で指定されている宣言の上に「ユーザースタイルシート」で指定された宣言が追加及び上書きされ、またはその後に「製作者スタイルシート」で指定された宣言が追加、上書きされるとイメージするとわかりやすいです。

スタイルシート指定

3.セレクタの得点(種類)による順位について

セレクタの記述は優先度に大きく影響します。以下表のような種類ごとの点数を合計し、高得点のスタイルを優先的に適用します。

【クラス区分別、各点数一覧】
指定方法 指定例 クラス(点数) 詳細度(得点)
a b c
idセレクタ #sample 1 0 0 100
区分ライン
classセレクタ .sample 0 1 0 10
疑似クラス :link 0 1 0 10
属性セレクタ [title=”sample”] 0 1 0 10
区分ライン
要素セレクタ p 0 0 1 1
疑似要素 ::first-line 0 0 1 1
ユニバーサルセレクタ * 0 0 0 0

ある入れ子の<p>タグにスタイルを適用する場合に、クラスCの要素セレクタを複数(div div div div div div div div div div div p { color: red; )指定した場合:得点は12ですが、クラスbのクラスセレクタ(p.sample { color: green )で指定した場合:得点11になりますが適用されるのはgreenとなります。その理由は詳細度のみでいうと前述の指定の方が高いのですが、クラス区分で考えた場合に前述は「0,0,12」になり後述「0,1,1」でクラス区分の高い方の数値の数が多い後述のスタイルを適用することになります。

得点指定

日常的には詳細度で優先順位を判断して、予想と違った場合のみクラスで見分けてみるというやり方で原因箇所を見つけるようにしますと判断時間が短く効率的に作業を行えます。

CSSでは区分ラインの高い順(a→b→c)の点数で優先順位が決定されます。

下のクラスの合計点が高くなっても区分ラインの上のラインより優先されることはありません。

:not( )疑似クラス中のセレクタもほかのセレクタと同様に数える。しかし、:not( )疑似クラス事態は疑似クラスとして数えない。

セレクタの組合せごとの得点の計算は以下表になりますので、参考にしてください。

【得点計算例】
指定例 構造 クラス(点数) 詳細度(得点)
a b c
ul li 要素セレクタ*2 0 0 2 2
ul ol+li 要素セレクタ*3 0 0 3 3
h1 + *[type=”sample”] 属性セレクタ*1,要素セレクタ*1 0 1 1 11
#sample:not(p) idセレクタ*1,要素セレクタ*1
※:not()疑似クラス自体はカウントせず、中のp要素をカウントする。
0 1 1 11
ul ol&nbspli.red classセレクタ*1,要素セレクタ*3 0 1 3 13
li.red.level classセレクタ*2,要素セレクタ*1 0 2 1 21
#sample p idセレクタ*1,要素セレクタ*1 1 0 1 101

4.記述位置による順位について

同一のスタイルシート内で同セレクタを指定している場合は、後から記述(下に記述)された宣言が適用されます。

記述位置指定

CSSの基本関連記事