【CSS】スタイルの優先度

CSSのスタイルの優先度についてご紹介します。

スタイルの優先度

同一の要素に同じプロパティが複数設定される場合があります。
その場合、どのプロパティ値を優先するかは『セレクターの優先度』と『読み込みの順序』によって決まります。

セレクターの優先度

同じ要素に対して複数のセレクターで同じプロパティを設定した場合、より詳細度の高いセレクターが優先されます。

次の例をご覧ください。

ソースコード

<style>
#title {
    color: red;
}
.heading {
    color: yellow;
}
h1 {
    color: blue;
}
</style>

<h1 id="title" class="heading">CSS : Cascading Style Sheets</h1>

プレビュー

プレビューから分かるようにid属性のセレクターが適用されていることが分かります。
セレクターの詳細度の強弱は細かくあり、結合などにより複雑に評価されます。
大まかに理解する場合は、『id属性 > クラス属性 / その他の属性 / 擬似クラス > 要素の種類』と覚えておけば良いでしょう。

なお、インラインスタイル（要素のstyle属性に設定）は、id属性よりも優先して適用されます。

読み込みの順序

同じ優先度のセレクターで同じプロパティを設定した場合、後に読み込まれる（後述の定義）が優先されます。

次の例をご覧ください。

ソースコード

<style>
.heading {
    color: red;
}
[lang="ja"] {
    color: blue;
}
</style>



<h1 class="heading" lang="ja">CSS : Cascading Style Sheets</h1>

プレビュー

h1要素に対して同じ優先度のセレクターでcolorプロパティを設定しています。
前述はred（赤）、後述はblue（青）を設定していますが、プレビューからも分かるように後述が適用されています。

!important

インラインスタイルよりも優先して適用する方法に!importantフラグの使用があります。
このフラグを使用すると強制的にプロパティを変更することができます。

ソースコードの構造や可読性、動作などを複雑にするため極力使わないことをオススメしますが、他者のソースコードで使われている可能性があるためご紹介します。

ソースコード

セレクター {
    プロパティ名: プロパティ値 !important;
}

強制的に適用するプロパティの値の後にスペースで区切って!importantを記述します。

次の例をご覧ください。

ソースコード

<style>
h1 {
    color: blue !important;
}
#title {
    color: red;
}
.heading {
    color: yellow;
}
</style>

<h1 id="title" class="heading">CSS : Cascading Style Sheets</h1>

プレビュー

詳細度の低いセレクターのプロパティが適用されていることが分かります。