CSSのセレクタの優先順位【現役エンジニアが解説】
今回は、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というクラスを持つ要素の文字色を緑色にしています。