CSS セレクタ

CSS セレクタ

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

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

このページでは、最も基本的な 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 セレクタグループ

収録本：CSS クラスセレクタの詳細

収録本：CSS ID セレクタの詳細

収録本：CSS 属性セレクタの詳細

収録本：CSS 后代セレクタ

収録本：CSS 子エレメントセレクタ

収録本：CSS 相邻兄弟セレクタ