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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．CSSの優先順位

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

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

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

▲目次へ戻る

２．優先順位の検討

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

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

▲目次へ戻る

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

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

原則

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

　

!important の例外

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

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

div{background-color:gray !important;}

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

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

!important が付いたユーザ指定の 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 の例外をご参照下さい。

▲目次へ戻る

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

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

　
上記の通り、セレクタの種類によって 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;}

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

▲目次へ戻る

６．読み込み順による優先順位

ブラウザは HTML 文書を上から順に読み込むので、上書き適用という CSS の性質上、より下に記述された CSS ほど優先順位が高くなります。

外部の CSS ファイルを HTML 内で読み込んだ場合も、読み込み順が後になるほど優先順位が高くなります。

▲目次へ戻る