CSS .class 選択子

定義と用法

CSS .class 選択子は、特定の class 属性値を持つ要素を選択するために使用されます。

特定の classを持つすべての種類の要素を選択するには、.)文字、次に class 属性値を持つ要素を選択するために使用されます。

element.class 選択子は、特定の class 属性値を持つ指定の要素を選択するには。

特定の属性値を持つ特定の class の種類の要素がある場合、要素名を書き、その後点 (.)文字、次に class 属性値（以下の例 2 を参照）。

ヒント：HTML要素は、複数の class（以下の例 3 を参照）。

インスタンス

例 1

すべての class="intro" の要素のスタイルを選択し設定します：

.intro {
  background-color: yellow;
}

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

例 2

すべての class="intro" の <p> 要素のスタイルを選択し設定します：

p.intro {
  background-color: yellow;
}

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

例 3

.class 選択子の異なる使い方：

/* class="center" のすべての要素を選択 */
.center {
  text-align: center;
}
/* class="large" のすべての <p> 要素を選択 */
p.large {
  font-size: 200%;
}
/* classリストに "fancy" と "beige" が含まれるすべての <p> 要素を選択 */
p.fancy.beige {
  font-family: 'Courier New', monospace;
  background-color: beige;
  border: 2px solid green;
}
/* class="ex1" の <p> 要素内のすべての class="ex2" の要素を選択 */
p.ex1 .ex2 {
  background-color: yellow;
}

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

CSS文法

.class {
  css宣言;
}

CSS文法

element.class {
  css宣言;
}

技術的詳細

ブラウザサポート