CSS 【 優先 順位 】 ~ 適用の仕組み

colmun_main3439

CSS(Cascading Style Sheets)のカスケーディングは、優先度が高いスタイルが、抵触するスタイルを上書きするという仕組みです。
ですので、各CSSの優先順位はとても重要です。
今回は、CSSの優先度のルールについてまとめたいと思います。

目次

1.CSSの優先
2.CSSの優先度調査
3.出所(origins)による優先度
4.セレクタの詳細性(specificity)による優先度
5.書いた順番による優先度
6.インラインで書かれたCSSが最強

1.CSSの優先

CSSの基本構文は、セレクタ { プロパティ : 値 } という形です。
CSSの優先度のルールは、この1つ1つの値を決定していくためのルールです。

同じ要素の同じプロパティで、値が違うCSSがあった場合に、ブラウザは、優先度のルールに従って値を決定します。
それをHTML上の1つ1つの要素全てに対して行っています。

1つのHTMLファイルで読み込まれる複数のCSSの中で、
body { color:#000 } というCSSと、body { color:#666 } というCSSがある場合、
文字の色にどちらのCSSを使うか(#000 か #666 か)….
これを決定する際の規則が、優先度のルールです。

▲目次へ戻る

2.CSSの優先度調査

ブラウザが優先順位を決める際には、段取りがあります。
ブラウザは、次のような手順でスタイルの優先度を調べていきます。

1.まず、CSSのメディアタイプの指定があるかを調査し、メディアタイプの指定があればそれが最優先
HTML内のlink要素、style要素のmedia属性や、CSS内の @media や @import にメディアタイプがあれば、そちらのスタイルを優先します。

2.メディアタイプの指定がない場合は、出所(origins)による優先度で順位を決定

3.2で選んだ中で、セレクタの詳細性(specificity)による優先度で順位を決定

4.それでも優先度が同じなら、書いた順番による優先度で順位を決定

5.インラインで書かれたCSSは別格で、3~4の優先度を無視して最強となる

ブラウザの処理手順は、案外複雑です。
基本的には、書いた順番(ブラウザが読み込む順番)で優先度が決まりますが、それ以前に優先順位が決まる場合があるので要注意です。
上記の段取りは、是非把握しておきましょう。

▲目次へ戻る

3.出所(origins)による優先度

メディアタイプの指定がない場合は、出所(origins)(=誰が書いたか)による優先度の決定が行われます。
 

3つのorigins

CSS には、3つのoriginsがあり、次のような優先度になっています。

【優先度No.1】作成者のスタイル:HTML文書に記述されたCSS
【優先度No.2】ユーザのスタイル:ユーザがブラウザ上で設定したスタイル
【優先度No.3】ブラウザのデフォルトスタイル

 

!importantが付いた場合

!importantが付いた値があると、優先度が入れ替わります。
!importantが付いたユーザスタイルの値が、最優先となります。

【優先度No.1】!importantが付いたユーザのスタイル
【優先度No.2】!importantが付いた作成者のスタイル
【優先度No.3】作成者のスタイル
【優先度No.4】ユーザのスタイル
【優先度No.5】ブラウザのデフォルトスタイル

 

!important宣言の使い方

!important宣言は、他よりも重要(最優先)な値にする宣言です。
書き方は、値の直後に!importantと記述するだけです。

a {text-decoration:underline !important;}

!importantを付けると、他の優先度調査手順を無視して、優先順位がトップになります。
インラインで指定されたものよりも優先されて、作成者のスタイルの中では最強となります。

あまり頻繁に使用すると、後で収拾がつかなくなる危険があるので、ここぞという時以外は、あまり使わない方が無難です。

▲目次へ戻る

4.セレクタの詳細性(specificity)による優先度

セレクタの詳細性(specificity)によって優先度が決まります。
その前に、セレクタの種類によって、次のような順位が決まっています。

【優先度No.1】idセレクタ
【優先度No.2】classセレクタ
【優先度No.3】要素セレクタ
【優先度No.4】全称セレクタ(*)

 

セレクタが詳しければ詳しいほど、優先度が上がる

セレクタの種類による優先度のルールに加えて、セレクタが詳しければ詳しいほど優先度が上がる、というルールがあります。
セレクタは、要素を指定するものなので、その要素についての記述が詳しいほど、対象が絞り込まれます。

例えばこんなHTMLソースがあったとして、

<div id=”top_index”>
<ul class=”index_list”>
<li class=”special”>スペシャル</li>
<li>レギュラー1</li>
<li>レギュラー2</li>
</ul>
</div>

スペシャルの文字だけ赤くしたい場合、

.special {color:red;}

でいいのですが、もっと絞り込むなら、次のような書き方もあります。

ul li.special {color:red;}
ul.index_list li.special {color:red;}
div ul.index_list li.special {color:red;}
div#top_index ul.index_list li.special {color:red;}
body div#top_index ul.index_list li.special {color:red;}

下にいくほど詳しい記述となります。
そして、詳しいほど優先度が上がります。
 

セレクタの詳細度の計算方法

詳細度には、計算方法があります。

次のA、B、C、Dの数字を4つ並べて、詳細度を表します。

A 要素に直接 style属性でスタイルを書く場合「1」それ以外「0」
B セレクタ内の idセレクタの数
C セレクタ内の class属性(classセレクタ)、擬似クラス、その他の属性の合計数
D セレクタ内の 要素名、擬似要素の合計数

例えば、「.special {color:red}」と指定した場合、「A=0、B=0、C=1、D=0」を横に並べると「0010」なので、優先度は「10」となります。
また、「body div#topIndex ul.indexList li.special {color:red}」と指定した場合は、「A=0、B=1、C=2、D=4」で、優先度は「124」となって、先の例より優先度が強くなります。

▲目次へ戻る

5.書いた順番による優先度

後から書いたものが優先されます。
ブラウザは上から下へ読み込んでいくので、後で書いたものとは、ブラウザが後で読み込むものとなります。

HTMLファイルにstyle要素で書いたCSSの中や、外部CSSファイルの中では、同じセレクタの優先度で同じプロパティなら、下に書いたほうが優先されます。
ですので、下に書いたスタイルが、上に書かれたスタイルを上書きします。

HTMLファイルにlink要素で読み込んだ外部CSSファイルも、後で指定されたファイルが優先されます。

<head>
<link rel=”stylesheet” href=”css/layout.css” >
<link rel=”stylesheet” href=”css/layout2.css” >
</head>

上記のような場合、layout.css と layout2.css の中に、同じセレクタの優先度で、同じプロパティの指定があれば、後で読み込まれるlayout2.css内のスタイルが優先されます。

▲目次へ戻る

6.インラインで書かれたCSSが最強

セレクタの詳細性(specificity)よりも、インライン(要素にstyle属性で直接スタイルを書く)で書かれたCSSの方が強いのですが、書いた順番でもインライン で書かれたCSSの方が強いです。
同じ origins の中ならインラインが最強です。

ただし、!importantが付いた値はインラインよりも優先されます。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です