CSSの優先順位とは？初心者が押さえるべき基本ルールと実践ポイント

Webサイトを制作をしていると、「合っているはずなのに、なぜこのスタイルが反映されないのか？」という壁に一度はぶつかったことがあるのではないでしょうか？
その原因の多くは、「CSSの優先順位」が間違っていることにあります。

この記事ではそんなお悩みを解決するために、CSSの優先順位の基本的な考え方から、実務で役立つコーディングのコツまで、CSS初学者の方にもわかりやすく解説します。

CSSの優先順位とは？
「Specificityスコア」という仕組み
よく聞く「!important」は最後の手段
優先順位をうまく扱うコーディングのコツ
まとめ

CSSの優先順位とは？

CSSの優先順位とは、複数のスタイルルールが同じ要素に適用されるときに、どのルールが勝つかを決める仕組みです。
この優先順位のルールには前提として「詳細な指定をしている内容を優先的に適用する」というものがあります。

優先順位の基本ルール

ではその「詳細な指定」とはどんなことでしょうか。
CSSの優先順位が高い順番に並べると、下記のようになります。

インラインスタイル（HTMLタグ内のstyle属性）
例：<p style="color:red;">
IDセレクタ（#id）
クラスセレクタ（.class）、属性セレクタ、擬似クラス
例：.menu, [type="text"], :hoverなど
タグセレクタ（要素セレクタ）
例：div, p, h1など
ユニバーサルセレクタ（*）や継承によるスタイル

このように、インライン > ID > クラス > タグ の順で強くなります。
直接タグにstyle属性を記述する「インライン」が一番強く、各ページに1度しか使用できないIDが2番目、特定の名前を付与しているclassが3番目、汎用性の高いタグやユニバーサルセレクタがそれに続きます。
つまり、よりその要素だけを指定する方法になっていると、優先順位が高くなるのです。

下記例の場合、実際に表示される文字の色は「赤」になります。

<style>
  p { color: black; }/* タグセレクタ */
  .text { color: blue; }/* クラスセレクタ */
  #main-text { color: green; }/* IDセレクタ */
</style>

<p id="main-text" class="text" style="color: red;">
  優先順位のテスト
</p>

「Specificityスコア」という仕組み

Specificity（詳細度） とは、複数のCSSルールが同じ要素に適用されるときに、どのスタイルが最終的に使われるかをブラウザが判断するための仕組みです。
ブラウザは、各セレクターの「強さ（重み）」を数値的に計算し、その結果に基づいて、競合するスタイルの中からどのルールを優先して適用するかを決定します。

ブラウザはセレクタの詳細度を以下のように数値化して比較しています。

インラインスタイル	1000点
IDセレクタ	100点
クラス・属性・擬似クラス	10点
タグ・擬似要素	1点

/* specificity = 1点 */
p {}

/* specificity = 10点 */
.text {}

/* specificity = 100点 */
#main {}

/* specificity = 112点 (1 ID + 1 class + 1 tag) */
#main .highlight p {}