CSSの優先順位
CSSは大原則として、「出てきた順」に処理されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style1.css"> <!-- 最初に処理される -->
<style>
h1 { color: red; } <!-- 2番めに処理される -->
</style>
<link rel="stylesheet" href="style2.css"> <!-- 3番めに処理される -->
</head>
<body>
<h1>テスト</h1>
</body>
</html>
=== style1.css の内容 ===
h1 { color: blue; }
=== style2.css の内容 ===
h1 { color: green; }
上記のようなHTMLがあった場合、出てきた順に処理されるので、以下の順で処理されます。
- style1.css の内容を処理
- <style> 要素の内容を処理
- style2.css の内容を処理
その際に、【全く同じセレクタ】で【同じ内容の宣言】があった場合は、あとから出てきた宣言でどんどん上書きされていきます。
そのため、上記の例では、<h1> 要素の文字色は【緑】になります。
これらは、以下の順に処理されていきますので、【ページ作成者のスタイルシート】で上書きされる形となります。
1. ユーザーエージェントスタイルシート
2. カスタムユーザースタイルシート
3. ページ作成者のスタイルシート
ただ、CSSのセレクタには多種の指定方法があり、【セレクタの記述内容は異なっているが、結果として同じHTMLの要素を指している】ということがしばしば起こります。
その際に重要になるのが、【詳細度】という考え方です。
また、CSSの特徴として【継承】というものもあります。
これは、【親要素で宣言された内容は子要素にも適用される】というものです。（すべてのプロパティがそうなるわけではありませんが）
継承によって適用された宣言と、その要素に対して直接宣言されたプロパティが重複した場合には、【直接宣言されたプロパティ】が優先されます。
詳細度の計算方法
【詳細度】は CSSの宣言が適用される際の重みであり、一致するセレクターそれぞれの種類の数によって特定されます。
複数の宣言が同じ詳細度であれば、 CSS の中で最後に宣言されたものが要素に適用されます。
詳細度の優先順位
詳細度の優先順位は、下記の順位となっており、同じ詳細度の種類が多いほど優先されます。
- !important 付きの宣言
- インラインスタイル
- IDセレクタ
- クラスセレクタ、属性セレクタ、擬似クラス
- 要素セレクタ
See the Pen CSSの詳細度1 by Masahiko Iwakiri (@m-iwakiri) on CodePen.
なお、詳細度の優先順位については、下記のリンク先のイラストが非常にわかりやすくまとめられています。（英語ですが、イラストだけでも分かりやすいです。）
https://specifishity.com/
!important の例外
CSSの宣言で、!important 規則が使用された場合、その宣言がどこでされたかに関わらず、この宣言はその他の宣言を上書きします。
なお、!important 規則が重複した場合には、より詳細度の高い宣言が優先されます。
例えば、使用している JavaScript フレームワークやライブラリでどうしてもインラインスタイルが避けられないが、そのスタイルを上書きしたい、といった場合に使用します。
:not() の例外
否定擬似クラスの :not() は、詳細度の計算では擬似クラスとは見なされません。
しかし、:not() の中に記述されたセレクタは詳細度の計算に用いられます。
See the Pen CSSの詳細度2 by Masahiko Iwakiri (@m-iwakiri) on CodePen.
形ベースの詳細度
詳細度の計算は、「セレクタの形式」によって行われるので、注意が必要です。
See the Pen CSSの詳細度3 by Masahiko Iwakiri (@m-iwakiri) on CodePen.
文書ツリー内の近接性の無視
指定されたセレクターで参照される要素と他の要素との近接性（ツリー内で近くにあるかどうか）は、詳細度には影響を与えません。
See the Pen oNjYKGQ by Masahiko Iwakiri (@m-iwakiri) on CodePen.
直接対象の要素と継承されたスタイル
直接対象となる要素のスタイル付けは、継承された規則の詳細度に関わらず、常に継承されたスタイルより優先されます。
See the Pen CSSの詳細度5 by Masahiko Iwakiri (@m-iwakiri) on CodePen.
この例の場合、<body> 要素に”color: red;”が宣言されており、かつ、IDセレクタなので詳細度も高いのですが、<h1> 要素に関しては、直接”color: blue;”が宣言されているので、詳細度は低くても、「直接宣言されているスタイル」が優先されます。
<p> 要素に関しては、何も宣言していないので、<body> 要素から継承した”color: red;”が適用されています。
MDN Web Docs： https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
コメント