【classセレクタ】クラス名をつけた要素に適用する

classセレクタでは、class属性で任意の名前をつけた要素に対してスタイルを適用することができます。 classセレクタとは、ピリオド「.」に続く任意の名前をセレクタとするものの事をいい、class属性の値に同じクラス名が指定されている要素に対してスタイルを適用します。

また「.クラス名」は「∗.クラス名」を省略したもので、そのクラス名が指定されている全ての要素に対してスタイルを適用します。 先頭に要素名を指定し「要素名.クラス名」というようにすると、その指定した要素(クラス名がついている要素)でのみ適用されます。

なおclass属性はid属性と異なり、一つのHTML文書内で同じクラス名を複数の要素に対して何度でも指定することができます。

書式

  • .クラス名 {プロパティ名:値;} ……… クラス名をつけた要素に対してスタイルを適用する

使用した時の例

.sample1 {color: red;}
span.sample1 {font-weight: bold;}
<h4 class="sample1">明日の天気</h4>
<p>2017年1月17日の天気は<span class="sample1">くもり</span>です。</p>
<p>19日にかけて徐々に気温が上がってきます。</p>
 
<h4 class="sample1">今日の天気</h4>
<p>2017年1月16日の天気は雪です。</p>
<p>日本海側を中心に平野部でも大雪となってます。</p>

ブラウザ上の表示例

明日の天気

2017年1月17日の天気はくもりです。

19日にかけて徐々に気温が上がってきます。

今日の天気

2017年1月16日の天気は雪です。

日本海側を中心に平野部でも大雪となってます。

対応ブラウザなどのデータ

適用対象 クラス名をつけた要素
対応ブラウザ Internet Explorer , Google Chrome , Firefox , Opera , Safari

関連情報