C
HTML/CSS 一覧
前へ5 / 11次へ
HTML/CSS/CSS基礎/Lesson 05

CSS セレクタ — スタイルを*どこに*当てるか

1時間·theory
このチャプター
1/3

CSS セレクタ — スタイルを*どこに*当てるか

🎯 このレッスンを読み終えると

このレッスンを最後まで読むと、以下の3つを自信を持ってできるようになります。

  • ▸✅ セレクタ5種 (要素・クラス・ID・属性・疑似) + 優先度
  • ▸✅ specificity の計算式 + !important の危険性
  • ▸✅ :hover / :focus / :nth-child の活用

学習目標をチェックリストとして手元に置き、すべてに答えられるようになったらレッスンを閉じましょう。

セレクタとは何か

核心の一行

CSS セレクタ = HTML のどの要素にスタイルを適用するかを指定するパターン。正確に選択することが保守性の高い CSS の出発点。

5つの基本セレクタ

css
/* 1. タグセレクタ — すべての <p> */
p { color: gray; }

/* 2. クラスセレクタ — class="highlight" を持つ要素すべて */
.highlight { background: yellow; }

/* 3. ID セレクタ — id="main" を持つ要素 (ページに1つだけ) */
#main { padding: 20px; }

/* 4. 属性セレクタ — type="submit" の input */
input[type="submit"] { background: blue; }

/* 5. 疑似クラス — ホバー状態 */
button:hover { background: green; }

結合子 — 関係で選択する

css
/* 子結合子 (直接の子のみ) */
nav > a { color: red; }     /* nav の直接の子 <a> */

/* 子孫結合子 (すべての深さ) */
nav a { color: blue; }       /* nav 内のすべての <a> */

/* 兄弟結合子 */
h2 + p { margin-top: 0; }    /* h2 の*直後の* p */
h2 ~ p { color: gray; }      /* h2 *以降のすべての* p */

よく使う疑似クラス

css
a:hover    { color: red; }       /* マウスが乗ったとき */
a:active   { color: orange; }    /* クリックした瞬間 */
a:visited  { color: purple; }    /* 訪問済みリンク */
input:focus { border: 2px solid blue; }   /* フォーカスを受け取ったとき */
input:disabled { opacity: 0.5; }
li:first-child { font-weight: bold; }     /* 最初の子 */
li:last-child  { border: 0; }
li:nth-child(2n) { background: #eee; }    /* 偶数行 (縞模様) */

クラス vs ID — どちらをいつ使うか

  • ▸クラス (.) = 複数の場所で再利用可能。9割のケースはこちら。
  • ▸ID (#) = ページに1つだけ。JS のフックやアンカー (#section1)、アクセシビリティ用。

> 💡 現場の慣習: スタイルには常にクラスを使う。ID は JS フックまたはアンカー用途にのみ。

過度に詳細なセレクタ — 保守の地獄

css
/* ❌ 非常に悪い例 */
body > main > article > div.container > ul > li > a.btn { ... }

/* ✅ 良い例 */
.btn-primary { ... }

セレクタが長いほど HTML 構造に強く結合されます。HTML を1行変えると CSS が全部壊れます。クラス名1つが最も安全。

BEM 命名規則 — 業界標準

css
/* Block__Element--Modifier */
.card { ... }                  /* Block */
.card__title { ... }           /* Element */
.card__title--large { ... }    /* Modifier */

複雑なコンポーネントでの衝突防止と意図の明確化に役立ちます。Tailwind や CSS-in-JS が登場した今では古い手法に感じるかもしれませんが、従来の CSS 環境では依然として標準です。

まとめ

基本の5種 (タグ・クラス・ID・属性・疑似) と結合子 (子・子孫・兄弟) さえ押さえれば、実務の8割は対応できます。深入りせず、クラス中心のシンプルなアプローチを心がけましょう。

🤖 AI にこう頼んでみよう

このレッスンの概念を理解すれば、AI に具体的に指示できるようになります。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

  • ▸「この CSS の specificity の衝突を解決して、!important を使わずに優先順位を整えて」
  • ▸「このクラス名を BEM 規則に従ってリネームして」
  • ▸「このネストされたセレクタをより平坦に (深さ2以下に) リファクタリングして」

なぜこれがトークンを減らすのか

概念を知らないと、AI の回答を受け取っても「それって何ですか?」と再度聞かなければなりません。その「再質問」がトークンを消費します。概念を一度身につけておけば、会話が一度で完結します。

先に読むとよい概念: フォームタグ
次のおすすめ: セレクターの優先順位
前へ一覧次へ
CSSセレクター - HTML/CSS