HTML Class-Attribut
Das class-Attribut weist einem Element einen oder mehrere Klassennamen zu und kann auch von JavaScript genutzt werden, um HTML-Elemente zu verändern.
Das HTML-Attribut class weist einem Element einen oder mehrere Klassennamen zu. Diese Namen sind der wichtigste Ankerpunkt, den CSS und JavaScript verwenden, um ein Element zu finden, zu stylen oder zu verändern.
Warum das class-Attribut verwenden
Der Grund, warum Klassen wichtig sind, ist die Trennung von Zuständigkeiten. Ihr HTML beschreibt die Struktur der Seite, während das Styling im Stylesheet liegt. Das class-Attribut ist die Verbindung zwischen beiden, und diese Verbindung hat zwei wichtige Eigenschaften:
- Wiederverwendbar. Dieselbe Klasse kann auf beliebig viele Elemente angewendet werden — ein
<h2>, ein<p>und ein<button>können alleclass="highlight"teilen und dieselbe Regel übernehmen. Schreiben Sie den Stil einmal, und wenden Sie ihn überall an. - Ein Selektions-Handle. Eine Klasse ist ein Label, das Sie als Selektor nutzen können. In CSS wählen Sie sie mit einem Punkt aus (
.highlight); in JavaScript finden oder ändern Sie sie über das DOM. Ohne Klassen müssten Sie jedes Element inline stylen und sich ständig wiederholen.
In HTML5 ist das class-Attribut ein globales Attribut, sodass Sie es auf jedem Element verwenden können.
class vs. id
Sowohl class als auch das id-Attribut kennzeichnen Elemente, damit Sie sie ansprechen können — aber sie beantworten unterschiedliche Fragen:
- Eine
idmuss im Dokument eindeutig sein — genau ein Element trägt eine bestimmte id. Greifen Sie darauf zurück, wenn Sie dieses eine spezifische Element meinen (ein JavaScript-Hook, ein In-Page-Anchor-Ziel). - Eine
classist wiederverwendbar — eine beliebige Anzahl von Elementen kann sie teilen, und ein Element kann mehrere Klassen tragen. Verwenden Sie sie, wenn ein Stil oder ein Verhalten auf eine Gruppe von Elementen zutrifft.
Im alltäglichen Styling ist class das Mittel der Wahl, denn Design wird aus wiederholten, gemeinsamen Mustern aufgebaut.
Gültige Klassennamen
Der Name sollte mit einem Buchstaben (a–z oder A–Z), einem Bindestrich (-) oder einem Unterstrich (_) beginnen und darf danach Buchstaben, Ziffern (0–9), Bindestriche und Unterstriche enthalten. Klassennamen sind case-sensitiv, sodass card und Card verschiedene Klassen sind. Es empfiehlt sich, Klassen nach dem Zweck des Elements zu benennen, nicht nach seinem Erscheinungsbild — intro altert besser als big-red.
<!-- Valid -->
<div class="my-card"></div>
<div class="_intro card2"></div>
<!-- Invalid -->
<div class="1card"></div> <!-- cannot start with a digit -->
<div class="my card"></div> <!-- a space here means TWO classes, not one -->Die letzte Zeile ist eine häufige Überraschung: Ein Leerzeichen innerhalb des Attributwerts erzeugt keinen einzelnen Namen mit Leerzeichen — es teilt den Wert in mehrere Klassennamen auf.
Syntax
<tag class="classname"></tag>Beispiel des HTML class-Attributs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red {
color: red;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<h1>Example of the HTML class attribute</h1>
<p class="red">It is some red paragraph.</p>
<p>This is a some text.</p>
<p class="orange">It is some orange paragraph.</p>
</body>
</html>In CSS schreiben Sie einen Punkt (.) gefolgt vom Klassennamen, um alle Elemente mit einer bestimmten Klasse auszuwählen. Unter CSS Selectors finden Sie die vollständige Liste der Möglichkeiten, Elemente anzusprechen.
Beispiel des HTML class-Attributs in Verbindung mit CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #1c87c9;
color: #ffffff;
padding: 20px;
}
</style>
</head>
<body>
<h1>Example of the class attribute</h1>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Sie können das class-Attribut auch über die classList-Eigenschaft des Elements mit JavaScript manipulieren. Die drei am häufigsten verwendeten Methoden sind:
classList.add('name')— fügt eine Klasse hinzu (tut nichts, wenn sie bereits vorhanden ist).classList.remove('name')— entfernt eine Klasse.classList.toggle('name')— fügt die Klasse hinzu, wenn sie fehlt, und entfernt sie, wenn sie vorhanden ist. Ideal für Ein-/Aus-Zustände wie "active" oder "open".
Beispiel des HTML class-Attributs in Verbindung mit JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="demo">Click a button to change this paragraph's class.</p>
<button onclick="document.getElementById('demo').classList.add('highlight')">Add</button>
<button onclick="document.getElementById('demo').classList.remove('highlight')">Remove</button>
<button onclick="document.getElementById('demo').classList.toggle('highlight')">Toggle</button>
</body>
</html>HTML-Elemente können auch mehr als einen Klassennamen haben. Jeder von ihnen muss durch ein Leerzeichen getrennt werden.
Beispiel des HTML class-Attributs mit mehreren Klassennamen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #202131;
color: #dddddd;
padding: 15px 25px;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<h1>Example of multiple classes</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">London</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title text-right">Paris</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">Tokyo</h2>
</body>
</html>Verschiedene Tags, wie <h2> und <p>, können denselben Klassennamen und denselben Stil haben.
Beispiel des HTML class-Attributs mit den Elementen <h2> und <p>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grey-text {
color: #808080;
}
</style>
</head>
<body>
<h1>Example of the class attribute </h1>
<h2 class="grey-text">Heading</h2>
<p class="grey-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Hinweis zur Barrierefreiheit
Klassennamen haben für Screenreader oder andere assistive Technologien keine Bedeutung — sie dienen ausschließlich dem Styling und der Skriptsteuerung. Ein class="button" auf einem <div> wird nicht als Button vorgelesen. Eine Klasse ist daher niemals ein Ersatz für die Wahl des richtigen semantischen Elements (verwenden Sie einen echten <button>) oder für das Hinzufügen von ARIA, wo es benötigt wird. Greifen Sie auf Klassen zurück, um zu stylen; greifen Sie auf Semantik zurück, um Bedeutung zu vermitteln.
In HTML 4.01 war das class-Attribut bei einigen Elementen auf Head-Ebene nicht erlaubt (wie <head>, <html>, <base>, <meta>, <script>, <style> und <title>). Diese Einschränkung ist historischer Natur: In HTML5 ist class ein globales Attribut, das auf jedem Element erlaubt ist, sodass Sie sich darüber keine Gedanken mehr machen müssen.