CSSの適用順位について

スタイルシートは柔軟に設定ができる分、思わぬところで表示が崩れたり、どこの条件がマッチして適用されたのか分からなくなることがあります。そこでスタイル設定の適用順番について確認してみます。

スタイルシートの書き方について

スタイルを設置する際には幾つか書き方があります。ざっと上げただけでも以下があります。

1. linkタグを使った場合
2. @importを使った場合
3. styleタグを使った場合
4. style要素を使った場合

そしてこれらの順番に加えて、特に厄介なのが !importantを使った場合 ではないでしょうか。これによって優先順位が大幅に変わることが多々あります。

linkタグを使った場合

スタイルシートの設定は基本的に上書きです。

<link rel="stylesheet" href="css1.css">
<link rel="stylesheet" href="css2.css">

のように設定があった場合、重複する設定についてはcss2.cssで上書きされます。

css1.css
h1 {
color: black;
}

css2.css
h1 {
color: red;
}

この場合、h1は文字色が赤になります。

しかし!important指定が入った場合は、css1.cssのものが優先されます。

css1.css
h1 {
color: black !important;
}

なお、css2.cssの方にも!importantを指定した場合は赤くなります。つまり !important についても後から設定したものが優先されます。

css2.css
h1 {
color: red !important;
}

@import を使ってスタイルシートファイル内で外部ファイルを読み込む場合、宣言はファイルの一番上に書かなければならないというルールがあります。つまり @import より後に書いた設定が優先されるということです。

css2.css
@import url("css1.css");
h1 {
color: red !important;
}

styleタグを使った場合

styleタグを使ってHTMLファイル内にインラインでスタイル設定を記述できます。この場合も優先順位は後から指定したものになります。

<link rel="stylesheet" href="css1.css">
<style>
  h1 {
    color: green;
  }
</style>

このように指定すればh1は緑になります。こちらも!important指定が有効で、外部ファイルでも利用できます。

style要素を使った場合

スタイル要素はタグの中に直接指定する方式です。以下のように指定することで文字は黒になります。

<h1 style="color:black;">Hello World!</h1>

ただしこの指定も!important指定には負けますので注意してください。jQueryなどから指定しても!important指定があるとうまく反映されないことがあるでしょう。

スタイルシートのクラス/ID/タグ名の優先順位について

要素指定している場合は関係ありませんが、スタイルシートファイルやstyleタグで指定する方法としては3つあるかと思います。

h1 {
  color: green;
}
.h1 {
  color: yellow;
}
#h1 {
  color: grey !important;
}

<h1 id="h1" class="h1">Hello World!</h1>

このように指定した場合、最も強いのはID指定になります。順番を入れ替えたとしても #h1 の指定が優先されます。次に有線されるのはクラス指定（.h1）になります。最後に h1 というタグでの指定になります。

もちろん ID で指定しないスタイル設定であればクラスやタグで指定しているものが適用されます。

---

スタイルシートの設定はマジック的なところがあり、書く順番を間違えると表面上はエラーはなくとも思った表示と異なる結果になることがあります。適用される順番をきちんと覚えておく必要があるでしょう。