CSS セレクター

1. CSS セレクターとは？

CSS セレクターは、スタイルを適用したい HTML 要素を「選択」するために使用されます。

CSS セレクターは、以下の 5 つのカテゴリーに分類できます。

• シンプルセレクター (Simple selectors): 名前、ID、クラスに基づいて要素を選択します。
• コンビネーターセレクター (Combinator selectors): 要素間の特定の関係に基づいて要素を選択します。
• 擬似クラスセレクター (Pseudo-class selectors): 特定の状態（マウスオーバーなど）に基づいて要素を選択します。
• 擬似要素セレクター (Pseudo-elements selectors): 要素の特定の部分（最初の文字や行など）を選択してスタイルを適用します。
• 属性セレクター (Attribute selectors): 属性や属性値に基づいて要素を選択します。

このページでは、最も基本的なシンプルセレクターについて解説します。

2. CSS 要素セレクター

要素セレクターは、要素名に基づいて HTML 要素を選択します。

以下の例では、ページ内のすべての <p> 要素に対して、テキストを中央揃えにし、文字色を赤色に設定します。

p {
  /* テキストを中央に配置 */
  text-align: center;
  /* 文字色を赤に設定 */
  color: red;
}

3. CSS ID セレクター

ID セレクターは、特定の要素を選択するために、その HTML 要素の id 属性を使用します。

要素の ID はページ内で一意（ユニーク）である必要があるため、ID セレクターは特定の 1 つの固有要素を選択する場合に使用されます。

特定の ID を持つ要素を選択するには、ハッシュ記号（#）の後に要素の ID を記述します。

#para1 {
  /* ID が para1 の要素を中央揃えにする */
  text-align: center;
  /* 文字色を赤にする */
  color: red;
}

       注意: ID 名を数字で始めることはできません。

4. CSS クラスセレクター

クラスセレクターは、特定の class 属性を持つ HTML 要素を選択します。

特定のクラスを持つ要素を選択するには、ピリオド（.）記号の後にクラス名を記述します。

以下の例では、class="center" を持つすべての HTML 要素が赤色かつ中央揃えになります。

.center {
  text-align: center;
  color: red;
}

4.1 特定の要素のみにクラスを適用する

特定の HTML 要素だけが特定のクラスの影響を受けるように指定することもできます。

以下の例では、class="center" を持つ <p> 要素のみがスタイル適用対象となります。

p.center {
  text-align: center;
  color: red;
}

4.2 複数のクラスを適用する

HTML 要素は、複数のクラスを参照することもできます。

<p class="center large">この段落は2つのクラスが適用されています。</p>

       注意: クラス名も数字で始めることはできません。

5. CSS ユニバーサルセレクター

ユニバーサルセレクター（*）は、ページ上のすべての HTML 要素を選択します。

* {
  /* ページ内のすべての要素を中央揃え、青文字にする */
  text-align: center;
  color: blue;
}

6. CSS グルーピングセレクター

グルーピングセレクターは、同じスタイル定義を持つすべての HTML 要素を選択します。

例えば、以下のコードを見てください（h1, h2, p 要素に同じスタイルが設定されています）。

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

コードを効率化（最適化）するために、セレクターをグループ化することをお勧めします。各セレクターをカンマ（,）で区切ります。

h1, h2, p {
  text-align: center;
  color: red;
}

7. CSS シンプルセレクターのまとめ