CSSセレクターの使い方【初心者向け完全解説】

CSS セレクターとは？

CSSを書くとき、「どのHTML要素にスタイルを当てるか」を指定するのが セレクター（selector） です。

CSS セレクターの使い方を覚えると、「この見出しだけ色を変えたい」「このクラスのボタンだけデザインを変えたい」という細かい指定ができるようになります。

この記事では、よく使うCSSセレクターを種類別にコード例とともに解説します。

① 要素セレクター

タグ名をそのまま書くと、そのタグすべてにスタイルが当たります。

/* すべてのh1に適用 */
h1 {
  color: #0d9488;
  font-size: 2rem;
}

/* すべてのpに適用 */
p {
  line-height: 1.8;
  color: #333;
}

📖 詳しくはCSS詳細度（優先順位）で解説しています。

② クラスセレクター（最もよく使う）

.（ドット）から始まるセレクターは、class="..." が指定された要素に当たります。

.btn {
  background-color: #0d9488;
  color: white;
  padding: 10px 24px;
  border-radius: 6px;
}

.card {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

<button class="swp-btn swp-btn--primary">送信する</button>
<div class="card">カードの内容</div>

同じクラスを複数の要素につけると、まとめてスタイルを適用できます。

👉 CSSレッスン1も参考にしてください。

③ IDセレクター

#（シャープ）から始まるセレクターは、id="..." が指定された要素に当たります。IDはページ内で1つだけ使うのがルールです。

#hero {
  background-color: #f0f9ff;
  padding: 80px 24px;
  text-align: center;
}

④ 子孫セレクター・子セレクター

特定の要素の中にある要素だけにスタイルを当てられます。

/* .card の中にある p すべてに適用（子孫セレクター） */
.card p {
  font-size: 0.9rem;
  color: #666;
}

/* .nav の直接の子要素 a だけに適用（子セレクター） */
.nav > a {
  color: white;
  text-decoration: none;
}

⑤ 擬似クラス（ホバー・フォーカスなど）

擬似クラス（ぎじクラス）は、要素の「状態」に応じてスタイルを当てます。

/* マウスを乗せたとき */
.btn:hover {
  background-color: #0f766e;
  transform: scale(1.05);
}

/* フォーカスされたとき（キーボード操作） */
input:focus {
  outline: 2px solid #0d9488;
}

/* リストの最初の子要素 */
li:first-child {
  font-weight: bold;
}

/* 偶数番目の行 */
tr:nth-child(even) {
  background-color: #f0f9ff;
}

⑥ 複数セレクター・全称セレクター

/* 複数の要素にまとめて適用（カンマで区切る） */
h1, h2, h3 {
  font-weight: bold;
  color: #0d9488;
}

/* すべての要素に適用（全称セレクター） */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

🔥 レスポンシブデザインの作り方で実践してみましょう。

セレクタの優先順位（詳細度）

同じ要素に複数のスタイルが当たっているとき、どのスタイルが優先されるかを決めるルールがあります。これを「詳細度（しょうさいど）」と呼びます。

優先順位は次の通りです（上が強い）。

• インラインスタイル（style属性に直接書いたもの）
• IDセレクタ（#header など）
• クラスセレクタ（.card など）
• タグセレクタ（h1、p など）

たとえば、タグセレクタで「color: blue;」と書いて、クラスセレクタで「color: red;」と書いた場合、クラスセレクタのほうが強いので文字は赤になります。

「CSSを書いたのに反映されない！」というとき、詳細度の問題であることが多いです。より強いセレクタが別の場所で指定されていないか確認しましょう。

CSSの基本的な書き方がまだ不安な人は「CSSとは？初心者向けにわかりやすく解説」を先に読んでおきましょう。

便利なセレクタの組み合わせ

基本のセレクタを組み合わせると、より細かく要素を指定できます。

子孫セレクタ

「.card p」のようにスペースで区切ると、「cardクラスの中にあるpタグ」だけにスタイルが当たります。ページ全体のpタグには影響しません。

子セレクタ

「.card > p」のように「>」で区切ると、「cardクラスの直接の子要素であるpタグ」だけに当たります。孫要素には当たりません。

隣接セレクタ

「h2 + p」のように「+」で区切ると、「h2の直後にあるpタグ」だけに当たります。見出しの直後の段落だけスタイルを変えたいときに便利です。

グループセレクタ

「h1, h2, h3」のようにカンマで区切ると、複数のセレクタに同じスタイルを一括で当てられます。同じスタイルを何度も書く手間が省けます。

擬似クラスセレクタ

セレクタには「擬似クラス」という特別な種類もあります。要素の状態に応じてスタイルを変えられます。

たとえば「:hover」は、マウスカーソルを乗せたときだけスタイルを適用します。ボタンの色を変えたり、リンクに下線をつけたりするのに使います。hoverの詳しい使い方は「CSSのhoverで動きをつける方法」で学べます。

「:first-child」は、親要素の最初の子要素だけにスタイルを当てます。「:nth-child(2n)」は偶数番目の要素だけに当てます。テーブルの行を交互に色分けするときに便利です。

擬似クラスについてもっと詳しく知りたい人は「CSS擬似クラス完全解説」を読んでみてください。

セレクタでよくあるミス

ミス1：クラス名のドット（.）を忘れる

CSSでクラスセレクタを書くとき、先頭のドットを忘れるとタグセレクタとして扱われます。「card」ではなく「.card」と書きましょう。

ミス2：スペースの有無で意味が変わる

「.card.active」（スペースなし）は「cardとactiveの両方のクラスを持つ要素」です。「.card .active」（スペースあり）は「cardクラスの中にあるactiveクラスの要素」です。まったく違う意味になるので注意しましょう。

ミス3：IDを使いすぎる

IDセレクタは詳細度が高いので、あとからスタイルを上書きしにくくなります。基本的にはクラスセレクタを使い、IDは特別な場合だけにしましょう。

まとめ

セレクターを使いこなすと、CSSの表現力が大きく広がります。レッスンでさらに詳しく学んでみましょう。