CSS

on Note

スタイルが適用される優先順位

CSSを記述する際、思っていたのと違う表示結果になったなんてことにならないように、スタイルが適用される優先順位を知っておきましょう。

HTMLにスタイルが反映される際、記述したCSSコードの中での優先順位が関係します。

例えばある要素に色指定をしたとします。同じCSSコードの中で、異なる値で重複して指定したとして下さい。この時、どちらの色が反映されるかは優先順位が影響するということです。

ここでは、CSSを記述する上で基礎となる、スタイルが適用される優先順位に関して説明します。

適用される優先順位の大前提

先に述べた例のように、異なる値で同じプロパティを指定した時、どの値が反映されるのか。この優先順位を考えるにあたって、最後に記述したものが最優先されるという大前提があります。

例えばある要素の色を青に指定したとします。その後、同じ要素に対して赤色で指定し直したとします。この場合、後に指定した赤色が結果として反映されるということです。

次のようなspan要素に対してスタイルをあてる場合を例にあげます。

<span>背景は何色でしょう</span>

これに、次のように背景色を指定します。

span {
    background-color: blue;
}
span {
    background-color: red;
}

同じプロパティで値を変えて、重複して背景色を指定したことになります。まず青色に指定して、その後赤色に指定し直したところ、次のように表示されました。

背景は何色でしょう

後に記述した赤色の方が反映されています。これがスタイルの上書きです。最初は青色に指定したが、赤色に上書きされたわけです。

コードは上から読み込まれる

後で記述したスタイルが適用されるのはなぜか。それは、ブラウザはHTMLCSSといったデータを上から順に読み込んでいく為です。

上から順番に読み込む為、下に行くほど最新の情報となります。よって下に記述したスタイルが優先的に適用されるわけです。今回の例のように、1つの要素に、同じプロパティで異なる値を指定した場合、後で記述した内容で上書きされます。

ブラウザはコードを上から読み込むというのは、コードを書く上で知っておくべき基礎的なことです。

複数あるCSSファイルを読み込む順番

1つのHTMLドキュメントで複数の外部CSSファイルを読み込むとします。例えばhead要素内で次のように指定して、外部化した複数のCSSファイルを読み込むことになります。

<head>
    中略
    <link rel="stylesheet" href="style-a.css">
    <link rel="stylesheet" href="style-b.css">
</head>

大前提として、ブラウザはコードを上から読み込むというのがあります。よってこの場合、「style-a.css」を読み込んでから「style-b.css」を読み込みます。

例えばある要素に色指定をするとして、「style-a.css」で青に指定したとします。そして同じ要素に対して、「style-b.css」では赤に指定したとします。

この場合「style-a.css」での青色を読み込んだ後、「style-b.css」の赤色で上書きされる形となり、赤色が適用されます。

セレクタを限定的に指定した方が優先される

次のようなHTMLがあるとします。

<main>
    中略
    <span>背景は何色でしょう</span>	
    中略
</main>

先程の例では、span要素に対して背景色を青に指定し、後で赤に指定し直しました。そうすると、後の指定が優先されるので背景が赤色になりました。

今回はセレクタの違いで比べてみます。スタイルをあてる要素を特定する為のセレクタを、次のように変更します。

main span {
    background-color: blue;
}
span {
    background-color: red;
}

先のスタイル(青に指定した方)が、「main要素のspan要素」という指定になり、より限定的なセレクタになりました。この場合背景色は何色になるでしょうか。結果は下のようになります。

背景は何色でしょう

青色に指定した方が先に記述しているにも関わらず、セレクタを限定的にしたことによって優先順位があがったことになります。

このように、セレクタを限定的にするとより優先されます。

セレクタの種類によって優先度が違う

セレクタでは、pやspanといった要素名で指定する場合もあれば、id名やclass名で指定する場合もあるかと思います。

要素名で指定した場合、そしてid名やclass名で指定した場合では、それぞれ優先度が違います。

次のようなHTMLがあるとします。

<span id="idname" class="classname">背景は何色でしょう</span>

span要素に「idname」というid名と「classname」というclass名をつけました。これに次のようなスタイルを指定します。

.classname {
    background-color: blue;
}
span {
    background-color: red;
}

結果、次のように表示されます。

背景は何色でしょう

先に記述した青色が適用されました。セレクタを、要素名にするよりもclass名にした方が優先されたことになします。

次はこれに、id名でのセレクタも加えてみます。CSSを次のように記述します。

#idname {
    background-color: orange;
}
.classname {
    background-color: blue;
}
span {
    background-color: red;
}

次のような表示結果になりました。

背景は何色でしょう

一番最初に記述したオレンジ色の指定が適用されました。id名での指定がclass名での指定よりも優先されたことになります。

要素名での指定、そしてid名やclass名での指定の優先度に順位をつけるとすれば次のようになります。

  1. id名のセレクタ
  2. class名のセレクタ
  3. 要素名のセレクタ

id名のセレクタが最も優先され、そしてclass名、要素名の順になります。

全称セレクタ(ユニバーサルセレクタ)が最も優先度が低い

「*」(アスタリスク)は、全称セレクタ(「ユニバーサルセレクタ」とも呼ぶ)と呼ばれ、ページ内の全ての要素が対象となるセレクタです。

この全称セレクタは、最も優先度の低いセレクタになります。

!important キーワードを付ければ最優先される

!importantは、スタイルを最優先させる為のキーワードです。!importantが付与された値は最も優先して適用されるわけです。

先ほどの、要素名で指定したセレクタよりid名で指定したセレクタが優先された例で、!importantを使ってみます。

<span id="idname" class="classname">背景は何色でしょう</span>
#idname {
    background-color: orange;
}
.classname {
    background-color: blue;
}
span {
    background-color: red !important;
}

先の例では一番優先度が低かった要素名でのセレクタに!importantキーワードを付けました。結果、次のように表示されます。

背景は何色でしょう

このように、!importantキーワードを付けた値が最も優先されます。

CSSを書く場所(style要素,style属性,外部ファイル)によって優先順位が違う

CSSを書く場所としては次の3通りあります。

  • head要素内で、style要素を用いてCSSを書く。
  • スタイルを適用したい要素に、style属性を用いてCSSを書く。
  • HTMLとは別に、外部ファイルとしてCSSファイルを作成する。

head要素の中で、style要素を使ってCSSを書くとは、次にような形です。

<head>
    中略
    <style>
        span {
            background-color: blue;
        }
    </style>
</head>

スタイルを適用したい要素に、style属性を付けてCSSを書くとは、次のような形です。

<span style="background-color: red;">背景は何色でしょう</span>

後は、CSSファイルを別に作成し、HTMLドキュメントから参照する方法です。

これら3パターンは優先順位が違います。

style要素と外部CSSファイルではどちらが優先されるか

次のようなspan要素にスタイルを指定します。このspan要素に対して、外部CSSファイルとstyle要素の両方で「background-color」を指定します。そしてそれぞれ違う色にしてみます。

<span>背景は何色でしょう</span>

外部CSSファイルではオレンジ色、style要素では青色に指定します。head要素は次のような記述です。

<head>
    中略
    <!--外部CSSの読み込み-->
    <link rel="stylesheet" href="style.css">

    <!--style要素で指定-->
    <style>
        span {
          background-color: blue;
        }
    </style>
</head>

結果、次のように表示されました。

背景は何色でしょう

外部CSSファイルの指定よりstyle要素での指定が優先されたことになります。

ブラウザはコードを上から読み込むので、これは当然の結果と言えます。どういうことか。

上に書いたhead要素を上から読み込むと、外部CSSファイルの読み込みが先に行われ(この時にオレンジ色が適用される)、その後にstyle要素を読み込みます。よって、後に指定した青色で上書きされたことになります。

head要素の記述を次のように変えてみます。

<head>
    中略
    <!--style要素で指定-->
    <style>
        span {
            background-color: blue;
        }
    </style>

    <!--外部CSSの読み込み-->
    <link rel="stylesheet" href="style.css">
</head>

style要素の指定を先にし、その後外部CSSファイルを読み込むようにします。つまり青色指定が先、オレンジ色指定が後という順番です。

結果、次のように表示されます。

背景は何色でしょう

style要素より後に読み込まれた外部CSSファイルの値が優先されました。style要素での青色指定を、外部CSSファイルでのオレンジ色指定で上書きしたわけです。

つまりこの場合、どの書き方が優先されるかというより、CSSを読み込む順番で優先順位が決まっているだけです。何度も言いますが、コードは上から読み込まれる為、後で記述した内容が優先されるのです。

ではstyle属性での指定も比べるとどうなるでしょうか。

style属性の優先順位はどうか

style属性はスタイルを適用する対象要素に付与します。なのでstyle属性での指定は、head要素の中で指定するstyle要素と外部CSSの参照より後で読み込まれることになります。

例えば次のように記述します。

<span style="background-color: red;">背景は何色でしょう</span>

対象の要素に対して一番最後に読み込まれることになる、style属性が最も優先されます。よってこの場合、style要素や外部CSSで別の色に指定していたとしても、赤色になります。

ただ、先に説明した「!important」は最優先させる為のキーワードです。なので、!importantを指定した値は、style属性で指定した値よりも優先されます。

まとめ

同じプロパティ、異なる値で複数箇所からスタイルをあてたとします。この場合、どの値が反映されるかは優先順位が関係します。

CSSを書いた時、「指定したスタイルが反映されない」と思った時は、適用される優先順位が原因かも知れません。


コードは上から順に読み込まれる為、より下に書いたコードが新しい情報と認識されます。よって下に書いたコードほど優先順位が上がります。


対象を1つのセレクタで指定するより、複数のセレクタを記述してより限定的な指定にした方が優先されます


idセレクタ > classセレクタ > 要素セレクタの順で優先されます。

全称セレクタでの指定は最も優先度が低くなります。


!importantキーワードを付けた値が最優先されます。


外部CSSの読み込み指定やstyle要素でのスタイル指定は、head要素の中に記述します。

よってこれらより、HTML要素に直接付与するstyle属性での指定の方が優先されます。コードは上から読み込まれる為です。