カスケード、詳細度、継承

詳細度を使ってどのCSSルールが勝つかを予測できるようになり、継承を活用してコード量を減らしましょう。

8 分 · 3 問

ルールを書いてページを再読み込みしても……何も変わらない。多くの場合、原因はバグではありません。カスケードです。複数のルールが同じ要素を対象にすると、ブラウザは次の順序で優劣を決めます。ルールの出所(ブラウザのスタイル、次にあなたのスタイル)、セレクターの詳細度、そして最後にコード上での出現順です。この仕組みを使いこなせば、デバッグに費やす時間を何時間も節約できます。

p {
  color: gray;
}

.article p {
  color: navy;
}

詳細度は3つの部分からなるスコアとして計算されます。(id、クラス、要素)です。#menu は 1-0-0、.nav-link は 0-1-0、a は 0-0-1 になります。左から右へと比較します。#menu(1-0-0)は、クラスが3つあっても .nav .link .active(0-3-0)に勝ちます。頭の体操: header nav a(0-0-3)と .main-link(0-1-0)ではどちらが勝つでしょうか? クラスです。クラスは何個の要素よりも重いからです。

header nav a {
  color: steelblue;
}

.main-link {
  color: crimson;
}

継承はコード量を減らすための味方です。テキスト関連のプロパティ(color、font-family、font-size、line-height)は自動的に子孫へ受け継がれます。ボックス関連のプロパティ(margin、padding、border、width)は継承されません。ありがたいことに、そうでなければすべての子要素が親のボーダーを受け取ってしまいます。ですから、タイポグラフィは最上位で一度だけ定義しましょう。

body {
  font-family: "Inter", sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. 2つのルールが同じ段落を対象にしています。#intro { color: red; } の次に .text { color: blue; }。どの色が適用されますか?
   • 青。クラスが最後に宣言されているから
   • 赤。id はクラスよりも詳細度が高いから
   • どちらでもない。ブラウザが競合を報告する
2. 次のプロパティのうち、デフォルトで子孫要素に継承されるのはどれですか?
   • margin
   • color
   • border
   • padding
3. 2つのセレクターがまったく同じ詳細度を持ち、同じ要素を対象にしています。どのルールが勝ちますか?
   • スタイルシート内で最後に書かれたルール
   • 最初に書かれたルール
   • セレクターが最も短いルール