CSS セレクター

CSSセレクタは、スタイルを適用したいHTML要素を選択します。

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

CSSセレクタは次の5つのカテゴリに分けることができます：

このページでは、最も基本的なCSSセレクタを説明します。

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

ここでは、ページ上のすべての<p>要素が中央揃えになり、テキストの色が赤になります：

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

idセレクタは、HTML要素のid属性を使用して特定の要素を選択します。

要素のidはページ内で一意なので、idセレクタは一意の要素を選択するために使用されます。

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

以下のCSSルールは、id=”para1″を持つHTML要素に適用されます：

#para1 {
  text-align: center;
  color: red;
}

注意: id名は数字で始めることはできません！

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

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

この例では、クラス=”center”を持つすべてのHTML要素が赤色で中央揃えになります：

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

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

この例では、クラス=”center”を持つ<p>要素のみが赤色で中央揃えになります：

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

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

この例では、<p>要素がクラス=”center”およびクラス=”large”に従ってスタイルが適用されます：

<p class="center large">この段落は2つのクラスを参照します。</p>

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

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

以下のCSSルールは、ページ上のすべてのHTML要素に影響を与えます：

* {
  text-align: center;
  color: blue;
}

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

次のCSSコード（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;
}