HTML `class` globales Attribut

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 Klassenwerten, die durch ASCII-Zwischenräume getrennt sind.

Jeder Klassenwert kann beliebige Unicode-Zeichen enthalten (außer natürlich ASCII-Zwischenräume). Wenn jedoch in CSS-Selektoren, entweder aus JavaScript mit APIs wie Document.querySelector() oder in CSS-Stylesheets, verwendet, müssen Klassenattributswerte gültige CSS-Bezeichner sein. Das bedeutet, dass wenn ein Klassenattributswert kein gültiger CSS-Bezeichner ist (zum Beispiel my?class oder 1234), er vor der Verwendung in einem Selektor entweder mit der Methode CSS.escape() oder manuell umgewandelt werden muss.

Aus diesem Grund wird Entwicklern empfohlen, Werte für Klassenattribute zu wählen, die gültige CSS-Bezeichner sind, die kein Escaping erfordern.

Beschreibung

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Alle globalen Attribute.
• element.className
• element.classList
• Einführung in CSS