CSSセレクターとは？基本の仕組みと主要セレクターをわかりやすく解説

CSSにおけるセレクター（Selector）とは、スタイルを適用したいHTML要素を選び出すための「パターン」のことです。CSSでは「どの要素に」「どんなスタイルを」適用するかを指定しますが、その「どの要素に」の部分を担うのがセレクターです。

セレクターを正しく理解することで、意図した要素だけに効率よくスタイルを当てられるようになり、CSSのコードも読みやすく管理しやすくなります。

代表的なCSSセレクター一覧

ここでは、特によく使われる基本的なセレクターを3つ紹介します。

各セレクターの使い方

1. クラスセレクター（.class）

ドット（.）に続けてクラス名を指定すると、同じクラスを持つ複数の要素にまとめてスタイルを適用できます。最も使用頻度の高いセレクターです。

.demo {
  color: blue;
}

この例では、class="demo" を持つすべての要素の文字色が青色になります。

2. IDセレクター（#id）

シャープ（#）に続けてID名を指定すると、そのIDを持つ単一の要素に対してスタイルを適用できます。IDはページ内で一意である必要があるため、特定の1つの要素だけを装飾したい場合に便利です。

#myid {
  font-weight: bold;
}

この例では、id="myid" を持つ要素の文字が太字になります。

3. ユニバーサルセレクター（*）

アスタリスク（*）を指定すると、すべての要素が選択されます。ブラウザのデフォルトスタイルをリセットする際などによく使われます。

* {
  margin: 0;
  padding: 0;
}

この例では、すべての要素の外側・内側の余白が0に設定されます。

まとめ

CSSセレクターは、スタイルを適用する対象となる要素を指定するための重要な仕組みです。まずは「クラスセレクター」「IDセレクター」「ユニバーサルセレクター」の3つをしっかり押さえておきましょう。これらを使いこなせるようになると、CSSでのデザイン作業が格段にスムーズになります。