CSSのセレクタの優先順位【現役エンジニアが解説】

PROGRAM

今回は、CSSのセレクタの優先順位について、おおまかに2つの指定方法に分け、簡単に解説していきます。

要素のstyle属性

スタイルの適用では、要素のstyle属性が最も優先されます。

そのため、styleタグ内でスタイルを指定しても適用されないことがあります。

<a id="hoge" class="hoge" href="https://example.com/" style="color:red;">リンク</a>

上記のコードでは、a要素のstyle属性内から文字色を赤色にするスタイルを適用しています。

idやクラス、属性セレクタ

style属性に次ぎ、id、クラス、属性セレクタの順で優先されます。

idは一つの要素に定まるため、これらのセレクタの中では特に優先度が高くなっています。

#hoge{background-color:red;}
.hoge{background-color:green;}
.hoge[href]{background-color:blue;}

上記のコードでは、優先度が高い順に、idやクラス、属性セレクタによるスタイルを適用しています。

優先順位を最優先に変える方法

styleタグ内からstyle属性の値を上書きできないと不便な場合もあります。

そのようなケースでは、各プロパティの値の末尾で!importantを使うことで最優先されます。

.hoge{color:green !important;}

上記のコードでは、style属性等で別の文字色が指定されていたとしても、最優先でhogeというクラスを持つ要素の文字色を緑色にしています。