【CSS】スタイルの優先順位

CSS

2021/04/05

優先順位とは

CSS には、どのスタイルを適用するかという優先順位があります。

基本として後に読み込まれたスタイルが適用されます。

CSS

p { color: red; }
p { color: blue; }
p { color: green; }  /* これが適用される */

しかし、以下の例では一番最初に読み込まれたスタイルが適用されます。

CSS

p.attention { color: red; }  /* これが適用される */
p { color: blue; }
p { color: green; }

このように、実際はセレクターの指定方法などでその優先順位は変わります。

スタイルが適用されない場合は、この優先順位が考えられていない可能性があります。

詳細度は、セレクター毎に決められた優先順位の重みのことです。以下のように 3 段階あり、詳細度の高い順にその数が多いほど優先順位が高くなります。

例えば以下のpタグにスタイルを適用することを考えます。

HTML

<div id="div" class="div">
  <p id="text" class="text">abcde</p>
</div>

セレクター	高	中	低
`p`	0	0	1
`.text`	0	1	0
`#text`	1	0	0
`p.text`	0	1	1
`p#text`	1	0	1
`div > p`	0	0	2
`.div > p`	0	1	0
`#div > p`	1	0	1
`.div > .text`	0	2	0
`#div > #text`	2	0	0

スタイルが適用されるのは、高の数が一番多いセレクターになります。同じ数の場合は中の数、また同じであれば小で比較します。

すべて同じであれば後に読み込まれたものが適用されます。

詳細度は以下のサイトで確認することができます。

HTML

<p style="color: red">abcde</p>

style 属性に指定したスタイルは、CSS のスタイルよりも優先されます。

CSS

.text { color: red !important; }

CSS のスタイルに!importantを付与することで、最も優先されるスタイルとなります。複数指定された場合は、後に読み込まれたものが適用されます。

!importantは既存のスタイルを破壊する恐れがあるため、多用することはオススメされていません。