HTMLとCSSでWebページのデザインを整えるとき、どの要素にどんなスタイルを適用するのかを指示する必要があります。
そのときに使うのがCSSセレクタです。この記事では、初心者でも理解しやすいように、基本のセレクタとその使い方を丁寧に解説します。

CSSセレクタとは？

CSSセレクタは「どのHTML要素にスタイルを当てるか」を指定するための仕組みです。

たとえば、すべての<p>タグの文字色を青くしたいときは、以下のように書きます。

p {
  color: blue;
}

よく使うCSSセレクタ一覧

CSSセレクタにはさまざまな種類があります。ここでは、Web制作の現場で特によく使われるものを紹介します。

具体的な使い方とコード例

① タグセレクタで段落の文字色を変更

ページ内の<p>要素すべてに色を適用します。

p {
  color: #333;
}

② クラスセレクタで共通デザインを指定

複数の要素に共通のデザインを当てたいときに便利です。

.box {
  background-color: #f0f0f0;
  padding: 20px;
}

③ IDセレクタで特定エリアを装飾

idは1ページに1回だけ使える、ユニークな識別子です。

#main {
  max-width: 800px;
  margin: 0 auto;
}

④ 子孫セレクタで特定の範囲内だけに適用

例えば<article>内の<p>タグだけにスタイルを当てたい場合。

article p {
  line-height: 1.8;
}

⑤ 子セレクタで第一階層だけに適用

入れ子のリスト構造の中で、最上位の項目だけにスタイルを当てたい場合に使います。

ul > li {
  list-style-type: square;
}

補足：セレクタの使い分けのコツ

• クラスセレクタは複数要素に適用できるため、もっとも汎用性が高い
• IDセレクタは1ページに1回だけ使うルールを守る
• タグセレクタは指定範囲が広すぎると意図しない影響を与えることも

おわりに

CSSセレクタは、Webデザインの基本中の基本です。
しっかり理解しておくことで、スタイルの管理がしやすくなり、保守性の高いCSSが書けるようになります。

次回は、:hoverや:first-childなどの「疑似クラス」や、「属性セレクタ」といった応用的なセレクタにもチャレンジしてみましょう！