`class` グローバル属性 (HTML)

class グローバル属性は、要素のクラスを ASCII ホワイトスペースで区切って並べたリストです。

試してみましょう

<p>ナレーター: これは劇の始まりです。</p>

<p class="note editorial">この点は少しありきたりに聞こえるかもしれません。削除または書き換えますか？</p>

<p>ナレーター: 皆さん、この始まりはとてもエキサイティングなものになることをあらかじめお断りしておきます。</p>

<p class="note">[照明が点灯し、風が吹き、カスピアンが舞台右側から登場。]</p>

.note {
  font-style: italic;
  font-weight: bold;
}

.editorial {
  background: rgb(255 0 0 / 0.25);
  padding: 10px;
}

.editorial::before {
  content: "Editor: ";
}

構文

class 属性は、 ASCII ホワイトスペースで区切られたクラス値のリストです。

それぞれのクラス値は、 Unicode 文字（もちろん、 ASCII ホワイトスペースを除く）を任意に含めることができます。ただし、 Document.querySelector() のような API を使用して JavaScript から、あるいは CSS スタイルシート内で CSS セレクターとして使用する場合、クラス属性の値は CSS 識別子として有効でなければなりません。これは、クラス属性値が有効な CSS 識別子ではない場合 (例えば、my?class や 1234)、セレクターで使用する前に、 CSS.escape() メソッドまたは手動でエスケープしなければならないことを意味しています。

このため、開発者は、エスケープを必要としない、有効な CSS 識別子である値をクラス属性として選ぶことをお勧めします。

解説

クラスを使用すると、CSS および JavaScript で、クラスセレクターまたは document.getElementsByClassName() などの関数を使用して、特定の要素を選択してアクセスすることができます。

仕様書ではクラスの名前に関する要求事項はありませんが、ウェブ開発者は、要素の表示ではなく、要素の意味的な目的を記述する名前を使用することが推奨されています。例えば、「属性」が italics （イタリック）で表示される場合であっても、記述するのに italics よりも attribute と使うということです。意味的な名前は、ページの外見が変更されても論理的な意味を保ちます。