1. 代表的な3つの基本セレクタ

CSSでデザインを指定する際、最も頻繁に使用する「ターゲットの指定方法（セレクタ）」は以下の3つです。

2. セレクタが競合したときの優先順位（詳細度）

もし同じHTML要素に対して、要素セレクタ・クラスセレクタ・IDセレクタから別々のスタイルが指定された場合、ブラウザは**「詳細度（強さ）が高いルール」**を優先的に採用します。

この詳細度は以下の計算式（強さのランキング）で定義されています。

例えば、p { color: red; } (1点) と .text-green { color: green; } (10点) が同じ段落要素に衝突した場合、強さ「10点」のクラスセレクタが勝ち、テキストは緑色（green）になります。

3. セレクタを組み合わせて複雑な条件を作る

複数のセレクタを組み合わせることで、「〇〇の中にある✕✕だけ」といった条件付きスタイルを指定できます。

• 子孫セレクタ（半角スペースで繋ぐ）: 例: .card p は、「cardクラスの要素の内側にあるすべてのp要素」を指します。
• 複数セレクタ（カンマで繋ぐ）: 例: h1, h2 は、「h1要素とh2要素のどちらにも」同じスタイルを適用します。

4. 詳細度の競合を体験してみよう

以下のCSSでは、`h1`要素セレクタと、`#title`IDセレクタ、`.main-header`クラスセレクタが競合しています。この場合、ID（100点）が勝利し、テキストは青色になります。

h1 {
    color: red; /* 1点: 最も弱い */
}

.main-header {
    color: green; /* 10点 */
}

#title {
    color: blue; /* 100点: このスタイルが勝利する */
}

5. まとめと次回予告

第2回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

• クラスセレクタは `.` を頭につけ、ページ内で何回でも使用可能。
• IDセレクタは `#` を頭につけ、ページ内で唯一の要素に1回だけ使用可能。
• 競合時は詳細度（点数）で比較され、ID（100点）＞クラス（10点）＞要素（1点）の順で優先される。

次回（第3回）は、ウェブ制作の要となる「カラーとテキストの装飾」をテーマに、フォントサイズの美しい設定方法や色表現のバリエーション、行間による視認性向上の技術を学びます。お楽しみに！