この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
皆さんCSSを書いていて、スタイルが適用されないという経験はありませんか？
そういうときは、CSSの優先度が関係していることがあります。
今回はCSSの優先度について解説します。
それでは始めます。
CSSの優先度とは？
CSSの優先度は、複数のスタイルルールが同じ要素に適用されるときに、どのルールが勝つか決める仕組みです。
例えば、以下のコードを見てください。
<p id="hello" class="text" style="color: red;">Hello World</p>p {
color: blue;
}
.text {
color: green;
}
#hello {
color: yellow;
}
最終的にどのスタイルが適用されるかは優先度で決まります。
- インラインスタイル（HTMLの style=”color: red;”）
- 一番強力で、通常は全てのルールに勝ちます。
- IDセレクタ（#hello）
- インラインスタイルがなければ、この指定が勝ちます。
- クラスセレクタ（.text）
- IDよりは優先度が低くなります。
- 要素セレクタ（p）
- 優先度は低いです。
この例では、インラインスタイルがあるので赤（color: red;）が最終的に適用されます。
インラインスタイルがなかった場合、次に優先度が高いのは IDセレクタ なので、黄色（color: yellow;）が適用されます。
優先度の基本的なルール
CSSの優先度は、基本的には以下のルールで判断されます。
1.から順番に高い優先度です。
- インラインスタイルが最も高い優先度
- 例:<div style=”color: red;”>
- IDセレクタ
- 例: #header { color: blue; }
- class、属性、疑似classセレクタ
- 例: .nav { color: green; }、[type=”text”] { color: orange; }、:hover { color: pink; }
- 要素セレクタ、疑似要素セレクタは最も低い優先度
- 例: p { color: black; }、::before { content: “”; }
important を使うと、優先度の計算に関係なくそのルールが最優先されるため、注意が必要です。
!important について
!important を使うと、そのルールの優先度が最優先されます。
複数のルールに !important がついている場合は、通常の優先度で比較されます。
例えば、以下のコードを見てください。
p {
color: blue !important;
}
#main p {
color: red;
}
上記コードのpタグには、color: blueが 適用されます。
先ほど説明した優先度のルールでは、要素セレクタよりIDセレクタの方が優先度が高いと書きました。
ですが、!important がついている場合は、優先度が一番低い要素セレクタであっても、優先度が最優先されます。
重ねてにはなりますが、pタグには、color: blueが 適用されます。
pタグのルールには !important がついているため、優先度が高くなり、最終的に青色が適用されます。
!important には注意が必要
!important の使いすぎはコードの可読性や保守性を下げるため、なるべく使わないことをおすすめします。
記述順について
CSSは同じ優先度のルールが複数存在する場合は、ソースコード上で後（下）に記述されたルールが適用されます。
p {
color: blue;
}
p {
color: red;
}
上記の例では、両方のルールの優先度は同じなため、ルールBが後（下）に記述されていることで、p要素は赤色（color: red;）になります。
この記述順のルールは、基本なので忘れがちですが重要なルールです。
優先度の計算方法
CSSの優先度は、数値のような形で計算することができます。
以下のように、各セレクタに対して重み付けを行い、最終的な数値を計算します。
優先度の重み
優先度の重みは4つの項目でわけられます。
具体的な計算方法は後述します。
- a: インラインスタイルの有無
- （インラインの場合、a = 1、それ以外は 0）
- b: IDセレクタの数
- （例: #header → b = 1）
- c: class、属性、疑似classの数
- （例: .nav、[type=”text”]、:hover → 各1つずつ）
- d: 要素セレクタ、疑似要素の数
- （例: p、::before → 各1つずつ）
具体的な優先度の計算方法
CSSの優先度は、複数のルールが同じHTML要素に適用されたとき、どのルールが最終的に有効になるか決める仕組みです。
インラインスタイルとは、HTML要素に直接記述された style 属性のことです。
インラインスタイルがあれば常に a = 1、なければ a = 0。
<div style="color: red;">
サンプル
</div>例えば上記コードは、インラインスタイルがあるため、a = 1 となります。
セレクタ中に含まれる #id の数が b の値となります。
IDセレクタは他のセレクタ（classなど）よりも優先度が高いです。
#header { color: blue; }
例えば上記コードは、#header が 1 つなので、b = 1。
classセレクタ（例: .nav）、属性セレクタ（例: [type=”text”]）、疑似claas（例: :hover）
IDセレクタより優先度は低いです。
.btn, [disabled], :focus {
color: white;
}各セレクタにつき 1 ポイント。たとえば、.btn と [disabled] と :focus があれば、c = 3。
HTML要素（例: p, h1）や、疑似要素（例: ::before, ::after）のことです。
優先度は一番低いです。
p, ::first-line {
color: white;
}p が 1 つ、::first-line が 1 つなので、d = 2。
優先度の計算例
以下の計算例を見てみてください。
p.note {
color: blue;
}
要素セレクタ: p → d = 1
classセレクタ: .note → c = 1
合計：
a = 0（インラインスタイルなし）
b = 0（IDセレクタなし）
c = 1
d = 1
最終的な優先度: (0, 0, 1, 1)
.btn.mybutton:hover::before {
content: "サンプル";
}
classセレクタ:.btn → c = 1 .mybutton → c = 1
疑似class: :hover → c = 1
合計: c = 3
疑似要素: ::before → d = 1
合計:
a = 0
b = 0
c = 3
d = 1
最終的な優先度: (0, 0, 3, 1)
- 同じ優先度の場合:
- 同じ (a, b, c, d) の値のルールがあれば、ソースコード上で後（下）に記述されたルールが適用されます。
- 計算方法の考え方:
- これは非常に重要な考え方で、「インラインスタイル (a) > IDセレクタ (b) > class/属性/疑似class (c) > 要素/疑似要素 (d)」という順番で重みが重いです。
- 例えば、A（a = 0 b = 0 c = 3 d = 1） と、B（a = 0 b = 1 c = 0 d = 0）のルールがあれば、Bの方が優先されます。
よくあるトラブル
トラブル1：セレクタの複雑さでの上書き
複雑なセレクタを書くと、意図せずに別のルールが上書きされる可能性があります。
例えば以下のようなコードです。
header .nav .menu li a {
color: green;
}このルールは、.header 内の .nav 内の .menu 内の li の中にある a 要素に適用されます。
上記は、先ほど説明した計算方法に基づくと、合計の優先度は(a=0, b=0, c=3, d=2) となります。
a {
color: blue;
}
このルールの優先度は、(a=0, b=0, c=0, d=1)
上記の例はシンプルなルールで後（下）に記述した場合でも、複雑なセレクタのルールの方が優先度が高いのでリンクは緑色になります。
対策
できるだけ複雑なセレクタにしない
トラブル2：インラインスタイルと競合してしまう
インラインスタイルはあまり使うことがないかと思いますが、やむを得ず使う場合は注意が必要です。
インラインスタイルは高い優先度なので、外部CSSで上書きするのが難しいです。
対策
できるだけインラインスタイルは使わない
トラブル3：!important を多用することによる弊害
!importantを多用すると、自分の意図したように上書きができず、管理が複雑になってしまいます。
対策
どうしても必要な場合を除き、!importantは使用しない。
おすすめ書籍
CSSの書き方で迷うことがあれば、書籍で勉強するのがおすすめです。
HTMLとCSSが勉強できる書籍を紹介します。
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
こちらの本は、初心者の方にまずおすすめしたい本です。
とにかく親切でわかりやすく書かれています。
図・イラストが多用されていて、重要なところが大きな字やアンダーラインで強調されています。
私は小さい字が長文でびっしり書かれていると文字に圧倒されてしまいます。
その点、勉強に入りやすく、飽きずに続けることができます。
本のタイトル通り、1冊目としておすすめです。
HTML5&CSS3標準デザイン講座 30LESSONS【第2版】
こちらの本は、HTML・CSSの文法や、レイアウトの仕方などが詳しく解説されています。
私が読んだのは前の版の書籍でしたが、とても詳しく書かれていて何度も読み返し、辞書のように使っていました。
こちらはある程度HTMLの概要をつかんでから読むのがおすすめです。
まとめ
今回は、CSSの優先度・優先順位について解説しました。
色々と書きましたが、単純に以下の内容を理解していれば大丈夫です。
インラインスタイル→IDセレクタ→class、属性、疑似classセレクタ→要素セレクタ、疑似要素セレクタの順の優先度です。
- インラインスタイルが最も高い優先度
- 例:<div style=”color: red;”>
- IDセレクタ
- 例: #header { color: blue; }
- class、属性、疑似classセレクタ
- 例: .nav { color: green; }、[type=”text”] { color: orange; }、:hover { color: pink; }
- 要素セレクタ、疑似要素セレクタは最も低い優先度
- 例: p { color: black; }、::before { content: “”; }
!important を使うと、優先度が最優先されます。
皆さんもよいコーディングライフを〜ノシ
