CSS クラスセレクタ

 

 

目次

1. 使用例
2. 構文・説明

使用例

p.warning {
  color: red;
}

<h1 class="warning">見出し</h1>
<p>本文</p>
<h2>小見出し</h2>
<p class="warning">本文2</p>

• この例では「class属性値が”warning”であるp要素の文字色を赤色にする」という指定をしています。

 

 

構文・説明

E.name {
  property_name: property_value;
}

• クラスセレクタは、HTMLのclass属性値を指定するセレクタです。
• Eの部分に「ユニバーサルセレクタ」もしくは「タイプセレクタ」を記述します。
• Eの部分がユニバーサルセレクタの場合に限り、省略することが可能です。
• nameの部分に「指定対象のclass属性値」を記述します。
• クラスセレクタは、指定したclass属性値を持つ（タイプセレクタで指定された）要素が適用対象になります。

 

.warning {
  color: red;
}

[class~="warning"] {
  color: red;
}

• クラスセレクタは、class属性の属性セレクタに置き換えることができます。
• 上記の「クラスセレクタ例」と「属性セレクタ（class属性）例」の適用対象は同じになります。