class

Das class globale Attribut ist eine Liste der Klassen des Elements, getrennt durch ASCII-Leerzeichen.

Probieren Sie es aus

<p>Narrator: This is the beginning of the play.</p>

<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>

<p>Narrator: I must warn you now folks that this beginning is very exciting.</p>

<p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>

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

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

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

Syntax

Das class-Attribut ist eine Liste von Klassennamen, getrennt durch ASCII-Leerzeichen.

Jeder Klassenname kann beliebige Unicode-Zeichen enthalten (außer natürlich ASCII-Leerzeichen). Wenn jedoch Klassenbezeichner in CSS-Selektoren verwendet werden, sei es von JavaScript mittels APIs wie Document.querySelector() oder in CSS-Stylesheets, müssen die Werte des class-Attributs gültige CSS-Bezeichner sein. Das bedeutet, wenn ein Wert des class-Attributs kein gültiger CSS-Bezeichner ist (zum Beispiel my?class oder 1234), muss er vor der Verwendung in einem Selektor entweder mit der Methode CSS.escape() oder manuell maskiert werden.

Aus diesem Grund wird empfohlen, dass Entwickler Werte für class-Attribute wählen, die gültige CSS-Bezeichner sind, die keine Maskierung erfordern.

Beschreibung

Klassen erlauben es CSS und JavaScript, spezifische Elemente über Klassenselektoren oder Funktionen wie document.getElementsByClassName() auszuwählen und darauf zuzugreifen.

Obwohl die Spezifikation keine Anforderungen an die Namen von Klassen stellt, werden Webentwickler ermutigt, Namen zu verwenden, die den semantischen Zweck des Elements beschreiben, anstatt die Darstellung des Elements. Zum Beispiel attribute, um ein Attribut zu beschreiben, statt italics, obwohl ein Element dieser Klasse kursiv dargestellt werden kann. Semantische Namen bleiben logisch, auch wenn sich die Präsentation der Seite ändert.

Spezifikationen

Specification
HTML # global-attributes:classes-2