カスケーディングは、CSSのスタイルシートにおいて、複数のルールが同じ要素に適用される場合にどのルールが最終的に適用されるかを決定するプロセスです。
要は何が後に読み込まれるのかといったような読み込み順を管理しているものと考えていれば大丈夫そうですが、単純に下に書いてあるコードが優先されるといったわけではありません。
その優先されるのに重要な詳細度の計算についてを紹介します。
詳細度の計算方法
CSSの詳細度は、セレクタの種類に基づいて以下の点数で計算されます。
単純にどんどん加算されていく形で計算し点数が高いものが優先される形になります。
- IDセレクタ（
#id）：100点 - クラスセレクタ（
.class）：10点 - 属性セレクタ（
[attribute]）：10点 - 擬似クラスセレクタ（
:pseudo-class）：10点 - 要素セレクタ（
element）：1点 - 擬似要素セレクタ（
::pseudo-element）：1点
具体例と詳細度の計算
以下に示すサンプルのセレクタの詳細度を試しに計算してみます。
セレクタ：html body *#container [title]:enabled::first-letter
- IDセレクタ（#container）：1個 × 100点 = 100点
- クラスセレクタ、属性セレクタ、擬似クラスセレクタ（[title],）：2個 × 10点 = 20点
- 要素セレクタ、擬似要素セレクタ（html, body, ::first-letter）：3個 × 1点 = 3点
合計：100点 + 20点 + 3点 = 123点
カスケーディングのルール
CSSスタイルの適用順序は以下のルールに従います：
- 詳細度：
- 詳細度が高いセレクタが優先されます。
- 詳細度は各セレクタの点数に基づいて計算されます。
- ソースの順序：
- 詳細度が同じ場合は、スタイルシート内で後に記述されたルールが優先されます。
実際のコードを見て計算してみる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Specificity Example</title>
<style>
body {
background-color: white; /* 詳細度 1点 */
}
.highlight {
background-color: yellow; /* 詳細度 10点 */
}
#unique {
background-color: orange; /* 詳細度 100点 */
}
[title] {
background-color: green; /* 詳細度 10点 */
}
</style>
</head>
<body>
<p id="unique" class="highlight" title="example">This is an example paragraph.</p>
</body>
</html>以下は、異なるセレクタの詳細度を示す例です：
body：詳細度 1点（要素セレクタ1個）.highlight：詳細度 10点（クラスセレクタ1個）#unique：詳細度 100点（IDセレクタ1個）[title]：詳細度 10点（属性セレクタ1個）a:hover：詳細度 11点（要素セレクタ1個 + 擬似クラスセレクタ1個）
カスケーディングのルールの適用
#uniqueセレクタ（100点）が最も詳細度が高いため、このルールが適用され、背景色はオレンジになります。- もし
#uniqueセレクタがなかった場合、.highlightセレクタ（10点）が適用され、背景色は黄色になります。 - 最後に、
p要素セレクタ（1点）が適用されるのは、他のすべてのセレクタが存在しない場合です。
まとめ
あまり深く考えなくともきれいにコーディングをしていれば、故意ではない形でスタイルが重複してかかってしまうことなどは特にないと思います。
また最近のテキストエディタは優秀なので、間違っているものや無駄なものなどは教えてくれたりしますが、仕組みとして理解をしておくといざというときに迷うことがなく、さらには検定などには計算をする問題がでてきたりします。
自分たちが仕事でつかっていくツールになりますので、しっかりと基本を理解したうえで使用していけるよう務めるのがベストかもしれません。
