CSS 優先順位

CSSの優先度とは、ウェブページ上の要素に適用されるスタイルが複数ある場合、どのスタイルが最終的に適用されるかを決定する仕組みです。理解しておくことで、意図したデザインをより簡単に実現できます。

CSSの優先順位は以下の要素によって決定されます。

1. 重要度（!important）
2. 選択の具体性
3. ソース順序

重要度（!important）

!important は、通常の優先度よりも高くなる特別な指定です。ただし、多用するとコードの可読性が低下し、デバッグが困難になるため、必要最低限に留めましょう。（できるだけ使わないでね。）

p {
  color: blue;
}

p {
  color: red !important;
}

上記の例では、!important が付けられた赤い文字色が適用されます。

選択の具体性

選択の具体性は、CSSセレクタの詳細度を示し、以下のカテゴリで評価されます。

1. インラインスタイル（style属性）
2. IDセレクタ
3. クラスセレクタ、属性セレクタ、擬似クラス
4. タグセレクタ、擬似要素

それぞれのカテゴリは、以下のように点数を持ちます。

具体性の高いセレクタほど優先されます。

ソース順序

優先度が同じ場合、後に記述されたスタイルが適用されます。

p {
  color: blue;
}

p {
  color: red;
}

上記の例では、後に記述された赤い文字色が適用されます。

CSSの優先順位を理解し、適切なセレクタとルールを使用することで、ウェブページのデザインを効果的に制御できます。