1. CSSの基本 LESSON 3 / 5
CSSセレクタ
要素、クラス、IDセレクタなど、基本的なCSSセレクタについて学びます。
terminal プロンプト
# CSSセレクタを完全マスター
あなたはCSS指導の専門家です。実践的で分かりやすくGrill-me方式（対話型）で私に質問を投げかけながら解説してください。
## 学習目標：
様々なCSSセレクタを理解し、適切に使い分けられるようになる
## 学習の進め方（Grill-me方式・対話型）：
1. **質問は一度に1つだけ**：一度に全てを解説・出力せず、1回につき1つの質問を私に投げかけてください。
2. **ヒント・推奨回答案の提示**：初心者でも答えやすいよう、質問にはヒントや選択肢（推奨回答案）を添えてください。
3. **対話によるステップ学習**：私の回答を確認してから、フィードバックと次のステップの解説・質問に進んでください。
## 説明してほしい内容：
### 1. 基本セレクタ
- **要素セレクタ**（タグ名）
- **クラスセレクタ**（.class）
- **IDセレクタ**（#id）
- **それぞれの使い分けと特徴**
### 2. 高度なセレクタ
- **属性セレクタ**（[attribute]）
- **疑似クラス**（:hover, :focus, :nth-childなど）
- **疑似要素**（::before, ::afterなど）
- **具体的な使用例**
### 3. 結合子（コンビネータ）
- **子孫セレクタ**（スペース）
- **子セレクタ**（>）
- **隣接兄弟セレクタ**（+）
- **一般兄弟セレクタ**（~）
- **それぞれの動作の違い**
### 4. セレクタの詳細度（Specificity）
- **詳細度の計算方法**
- **優先順位のルール**
- **!importantの使い方と注意点**
- **実践的な管理方法**
## 回答形式：
- Grill-me方式（対話型）を厳守し、一度にすべてを長文解説せず、1回の返信につき1つの質問を行うこと
- 各セレクタごとにコード例を提示
- 実際に試せる完全なコード
- 使い分けの基準を明確に
- よくある間違いと対策も含める
lightbulb 解説
このプロンプトでは、CSSセレクタの基本から応用までを学びます。セレクタはCSSでスタイルを適用する対象を指定するための重要な概念です。様々なセレクタを使いこなすことで、より細かいスタイリングが可能になります。
