ITコラム

ITコラム

2017.03.24

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

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

１．CSSの優先順位

CSS は基本的に次のように記述します。

セレクタ｛プロパティ：値｝

CSS の優先順位は、上記の記述内の「値」について複数の設定値がある場合に、どの設定値を適用するか決定する考え方です。

CSS の優先順位に従って、各ブラウザが全ての HTML 要素に対して適用する設定値を決定します。

▲目次へ戻る

２．優先順位の検討

ブラウザが CSS の適用を決定する際には、次のように優先順位を検討していきます。

１．メディアタイプについての CSS
link要素、style要素のmedia属性や、CSS内の @media や @import にメディアタイプがあれば、その設定値が最優先

２．指定元によって優先順位を決定

３．インラインで記述された CSS

４．セレクタの設定方法によって優先順位を決定

５．ブラウザの読み込み順によって優先順位を決定

上書き適用するという CSS の性質上、基本的には HTML 文書内で後に記述された CSS ほど優先順位が高くなりますが、それに先立って決定する優先順位があることに注意する必要があります。

▲目次へ戻る

３．指定元による優先順位

メディアタイプについて CSS の指定がない場合は、どこで指定されたかによって優先順位が決定されます。
　

原則

CSS がどこで指定されたかによって、次のような優先順位が決定します。

１．作成者指定の CSS
　　（サイトの作成者がソース上で指定）
２．ユーザ指定の CSS
　　（ユーザがブラウザ上で指定）
３．各ブラウザのデフォルト CSS

!important の例外

明示的に CSS を優先させる目的で記述する「 !important 宣言」というものがあります。

!important 宣言は、次のように記述します。

div{background-color:gray !important;}

設定値の後に半角スペースを空けて「 !important 」と記述されたものが
!important 宣言付きの CSS です。

!important を付けると優先順位が高くなりますが、指定元による優先順位を検討する際には、その原則的な優先順位が変わります。

!important が付いたユーザ指定の CSS が最優先順位となり、以下の順位は次のようになります。

１．!important が付いたユーザ指定の CSS
２．!important が付いた作成者指定の CSS
３．作成者指定の CSS
４．ユーザ指定の CSS
５．各ブラウザのデフォルト CSS

便利に見える !important 宣言ですが、安易に使用すると優先順位を正しく把握することが困難になり、意図した結果と違うスタイルが表示される危険性があるので、使用には細心の注意を払う必要があります。

▲目次へ戻る

４．インラインで記述された CSS

指定元による優先順位が同位の場合は、インライン（ style 属性を設定する形で HTML 要素に直接 CSS を記述する方法）で記述された CSS が、抵触する他の CSS に優先して適用されます。

インラインで記述された CSS とは、次のような形のものです。

<div style="background-color:gray; padding:20px;">
  <p style="color:blue;">晴れ</p>
</div>

上のサンプルは、背景色がグレーで余白が 20px の div 要素内に、文字色が青で表示される p 要素がある HTML 文書です。

div 要素と p 要素のタグ内に「 style=”プロパティ : 値 ;” 」として CSS を記述しています。

!important の例外

!important 宣言が付いた値は、インラインで記述された CSS よりも優先されます。

!important 宣言については前項の!important の例外をご参照下さい。

▲目次へ戻る

５．セレクタの種類による優先順位

セレクタの種類によっても、次のような優先順位があります。

１．idセレクタ
２．classセレクタ
３．要素セレクタ
４．*（ユニバーサルセレクタ）

　
上記の通り、セレクタの種類によって CSS の優先順位が決定しますが、それに加えて、セレクタの設定が詳細なほど優先順位が高くなるというルールもあります。

次のような HTML 要素について「 45 」だけ青文字で表示したい場合、

<div id="div1">
  <p id="p1">
    <span>70</span>
    <span class="font_blue">45</span>
    <span>60</span>
  </p>
</div>

セレクタの設定方法は色々ありますが、次の記述を比較すると上にいくほど優先順位が高くなります。

body div#div1 p#p1 span.font_blue{color:blue;}

div#div1 p#p1 span.font_blue{color:blue;}

div p#p1 span.font_blue{color:blue;}

p#p1 span.font_blue{color:blue;}

p span.font_blue{color:blue;}

span.font_blue{color:blue;}

このように、セレクタをより詳しく設定した方が優先順位が高くなります。

▲目次へ戻る