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: ";
}

Beschreibung

Klassen ermöglichen es CSS und JavaScript, spezifische Elemente über die Klassenselektoren oder Funktionen wie document.getElementsByClassName() auszuwählen und zuzugreifen.

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

Syntax

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

Jeder Klassenwert kann beliebige Unicode-Zeichen enthalten (außer natürlich ASCII-Leerzeichen). Wenn sie jedoch in CSS-Selektoren verwendet werden, entweder aus JavaScript mit APIs wie Document.querySelector() oder in CSS-Stylesheets, müssen Klassenattributwerte gültige CSS-Bezeichner sein. Das bedeutet, wenn ein Klassenattributwert 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 Entwicklern empfohlen, Werte für Klassenattribute zu wählen, die gültige CSS-Bezeichner sind, die keine Maskierung erfordern.

Spezifikationen

Specification
HTML
# global-attributes:classes-2

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch