CSSの優先順位徹底解説！初心者でも分かる使い方・応用方法、実践サンプルコード付き！

●CSSの優先順位とは？

CSS（Cascading Style Sheets）は、HTMLにスタイルを適用するための言語です。

CSSの優先順位とは、複数のCSSルールが同じ要素に適用される場合に、どのルールが優先されるかを決定する仕組みのことです。

この記事では、CSSの優先順位に関する基本的な知識と、それを活用した実践的な使い方や応用方法を徹底解説します。

●優先順位の決定方法

1. 重要度（!important）
2. セレクタの詳細度
3. ソース順

まず、重要度が最も高いものが適用されます。!importantがついたスタイルは、他のスタイルよりも優先されます。

ただし、!importantを使いすぎると保守性が低下するため、注意が必要です。

次に、セレクタの詳細度が考慮されます。

詳細度は次のルールに従って計算されます。

1. IDセレクタの数
2. クラスセレクタ、属性セレクタ、疑似クラスの数
3. 要素セレクタ、疑似要素の数

詳細度が高いほど、そのスタイルが優先されます。

最後に、ソース順が考慮されます。

後に記述されたスタイルが、同じ詳細度のスタイルよりも優先されます。

●使い方

例1: セレクタの詳細度を理解しよう

/* セレクタの詳細度: 0,0,1 */
p {
  color: red;
}

/* セレクタの詳細度: 0,1,0 */
.warning {
  color: orange;
}

/* セレクタの詳細度: 1,0,0 */
#main-title {
  color: blue;
}
/* CSS */

<p id="main-title" class="warning">Hello, world!</p>
<!-- HTML -->

この例では、<p>要素に対して3つのスタイルが適用されますが、詳細度が最も高い#main-titleのスタイルが優先され、テキストの色は青になります。

例2: ソース順を利用しよう

.warning {
  color: orange;
}

.warning {
  color: green;
}
/* CSS */

<p class="warning">Hello, world!</p>
<!-- HTML -->

この例では、同じ詳細度の.warningスタイルが2つ適用されますが、後に記述されたスタイルが優先され、テキストの色は緑になります。

●応用方法

例1: クラス名を組み合わせて詳細度を上げる

/* セレクタの詳細度: 0,2,0 */
.warning.urgent {
  color: red;
}

/* セレクタの詳細度: 0,1,0 */
.warning {
  color: orange;
}
/* CSS */

<p class="warning urgent">Hello, world!</p>
<!-- HTML -->

この例では、.warning.urgentの詳細度が.warningよりも高いため、テキストの色は赤になります。

例2: スタイルの上書きを最小限にする

/* ベーススタイル */
button {
  background-color: blue;
  color: white;
  font-size: 16px;
}

/* 修正スタイル */
button.special {
  background-color: red;
}
/* CSS */

<button>通常ボタン</button>
<button class="special">特別なボタン</button>
<!-- HTML -->

この例では、通常のボタンと特別なボタンのスタイルを、上書きを最小限にして管理しています。

特別なボタンのスタイルは、通常のボタンのスタイルに対して必要な変更だけを記述しています。

この記事では、CSSの優先順位について徹底解説しました。

初心者の方でも分かるように、基本的な知識から応用方法まで詳しく紹介しました。

今後のWeb開発にぜひ活用してください。