class属性

class属性は、要素にクラスを割り当てるグローバル属性。

クラスを割り当て、要素をクラス分け（分類）することで、スタイルシートのセレクターとして使ったり、JavaScriptでDOM操作したりできる。

ブラウザ対応

構文

<element class="クラス名">
クラス名
文字列で指定。
半角スペース区切りで、複数のクラス名を指定することもできる。

要点

  • 要素にクラスを割り当て、要素をクラス分け（分類）する。
  • 同じクラス名を、複数の要素に指定することで、同じクラスに属する要素であると指定できる。
  • 主に、スタイルシートのセレクターとして使用する。
  • JavaScriptでDOM操作するときにも便利だ。
  • 全てのHTML要素で使用できるグローバル属性である。

サンプルコード

１つのクラスを指定

<p class="sampleClass">テキスト</p>

複数のクラスを指定

<p class="sampleClassA sampleClassB sampleClassC">テキスト</p>

サンプル

HTMLソースコード

<style scoped="scoped">
	span.sampleClassA,
	span.sampleClassB,
	span.sampleClassC {
		font-size: 32px;
	}
	span.sampleClassA {
		background-color: pink;
	}
	span.sampleClassB {
		background-color: lightblue;
	}
	span.sampleClassC {
		background-color: lightgreen;
	}
	span.sampleClassD {
		color: red;
	}
</style>
<span class="sampleClassA">Ａ</span>
<span class="sampleClassA sampleClassD">Ａ</span>
<span class="sampleClassB">Ｂ</span>
<span class="sampleClassB sampleClassD">Ｂ</span>
<span class="sampleClassA">Ａ</span>
<span class="sampleClassC">Ｃ</span>
<span class="sampleClassB">Ｂ</span>
<span class="sampleClassC sampleClassD">Ｃ</span>
<span class="sampleClassC">Ｃ</span>
<span class="sampleClassA">Ａ</span>

実際の表示

Ａ Ａ Ｂ Ｂ Ａ Ｃ Ｂ Ｃ Ｃ Ａ