✅ CSSセレクタとは？
CSSセレクタ とは、スタイルを適用したい HTML要素を指定するための書き方のことです。
たとえば次のコードでは、p（段落）を指定するセレクタを使っています。
p {
color: red;
}👉 この場合、ページ内のすべての <p> が赤文字になります。
CSSを正しく使うためには、セレクタの種類と使い分けを理解することが大切です。
📌 基本的なセレクタ
1. 要素セレクタ
HTMLタグそのものを指定します。
h1 {
font-size: 24px;
}👉 ページ内のすべての <h1> に適用されます。
2. クラスセレクタ（.クラス名）
特定のクラスを持つ要素に適用します。
.title {
color: blue;
}👉 <p class="title"> にだけ反映されます。
3. IDセレクタ（#ID名）
特定の1つの要素に適用します。
#header {
background: #333;
color: white;
}👉 <div id="header"> に適用されます。
⚠️ IDは1ページに1つだけが原則。
4. 全称セレクタ（*）
すべての要素に適用します。
* {
margin: 0;
padding: 0;
}👉 CSSリセットでよく使われます。
📌 組み合わせのセレクタ
1. 子孫セレクタ（A B）
指定要素の中にあるすべての子要素を対象にします。
div p {
color: green;
}👉 <div> の中にある <p> だけが緑色に。
2. 子セレクタ（A > B）
直接の子要素だけに適用。
div > p {
color: orange;
}👉 <div> の直下にある <p> のみ対象。
3. 隣接セレクタ（A + B）
ある要素の直後にある兄弟要素を指定。
h1 + p {
font-weight: bold;
}4. 兄弟セレクタ（A ~ B）
指定要素の後にあるすべての兄弟要素を対象。
h1 ~ p {
color: gray;
}📌 属性セレクタ
HTML要素の属性を条件に指定できます。
a[target="_blank"] {
color: red;
}👉 target="_blank" を持つリンクだけ赤文字。
他にも：
[attr]→ 属性を持つ要素すべて[attr^="abc"]→ "abc" で始まる属性値[attr$="xyz"]→ "xyz" で終わる属性値[attr*="foo"]→ "foo" を含む属性値
📌 擬似クラスセレクタ
ユーザーの操作や要素の状態に応じてスタイルを変えられます。
:hover→ マウスを乗せたとき:active→ クリック中:focus→ フォーム入力中:nth-child(n)→ n番目の要素
例：ボタンのホバー時に色を変える
button:hover {
background: #2ecc71;
}📌 擬似要素セレクタ
要素の一部や仮想的な要素を装飾できます。
::before→ 要素の前に内容を追加::after→ 要素の後に内容を追加::first-line→ 最初の1行だけ装飾::first-letter→ 最初の1文字だけ装飾
例：吹き出し風デザイン
.message::before {
content: "💬 ";
}🎯 セレクタの優先順位（重要）
複数のCSSが同じ要素に適用される場合、優先順位があります。
- !important が最強
- IDセレクタ（#id）
- クラスセレクタ（.class）、属性セレクタ、擬似クラス
- 要素セレクタ（p, div など）
- 続けて書かれた順（後勝ちルール）
👉 初心者は「なぜ効かない？」となりやすいポイントなので要注意。
📌 まとめ
- CSSセレクタは HTML要素を選択するための仕組み
- 基本 → 要素、クラス、ID、全称
- 応用 → 子孫・兄弟・属性・擬似クラス・擬似要素
- 優先順位を理解すると「効かないCSS」問題を解決できる
👉 初心者はまず クラスセレクタと擬似クラス をマスターするのがオススメです。