CSSセレクター

CSS 構文 CSSの使用法

CSS セレクター

CSS セレクターは、スタイルを設定する HTML 要素を「検索」(または選択) するために使用されます。

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

  • 単純なセレクター (名前、ID、クラスに基づいて要素を選択します)
  • コンビネータ セレクター (要素間の特定の関係に基づいて要素を選択します)
  • 疑似クラス セレクター (特定の状態に基づいて要素を選択します)
  • 擬似要素セレクター (要素の一部を選択し、そのスタイルを設定します)
  • 属性セレクター (属性または属性値に基づいて要素を選択します)

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

CSS 要素セレクター

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

例

ここでは、ページ上のすべての <p> 要素が赤色のテキスト色で中央揃えに配置されます。

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

自分で試してみてください

CSS ID セレクター

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

要素の ID はページ内で一意であるため、ID セレクターを使用して一意の要素を選択します。

特定の ID を持つ要素を選択するには、ポンド記号 (#) の後に要素の ID を入力します。

例

この CSS ルールは、id="para1" の HTML 要素に適用されます:

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

自分で試してみてください

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

CSS クラスセレクター

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

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

例

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

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

自分で試してみてください

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

例

この例では、class="center" を持つ <p> 要素のみが中央揃えになります。

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

自分で試してみてください

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

例

この例では、<p> 要素は class="center" および class="large" に従ってスタイル設定されます。

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

自分で試してみてください

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

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

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

例

次の CSS ルールは、ページ上のすべての HTML 要素に影響します。

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

自分で試してみてください

CSS グループ化セレクター

グループ セレクターは、同じスタイル定義を持つすべての 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;
}

自分で試してみてください

すべての単純な CSS セレクター

セレクター 例 例の説明
.class .intro class="intro" を持つすべての要素を選択します。
#id #firstname id="firstname" の要素を選択します。
* * はすべての要素を選択します。
element< p すべての <p> 要素を選択します。
element,element,.. div, p すべての <div> 要素とすべての <p> 要素を選択します。
CSS 構文 CSSの使用法