Klasse

Ein Klassenselektor in CSS beginnt mit einem Punkt (.), wie hier

.class {

}

Ein Klassenselektor wählt alle Elemente mit einem übereinstimmenden Klassenattribut aus.

Zum Beispiel dieses Element

<button class="big-button">Push Me</button>

wird ausgewählt und wie folgt gestylt

.big-button {
  font-size: 60px;
}

Sie können einer Klasse jeden Namen geben, der mit einem Buchstaben, einem Bindestrich (-) oder einem Unterstrich (_) beginnt. Sie können Zahlen in Klassennamen verwenden, aber eine Zahl darf nicht das erste Zeichen oder das zweite Zeichen nach einem Bindestrich sein. Es sei denn, Sie werden verrückt und beginnen mit dem Escaping von Selektoren, was seltsam werden kann

.\3A \`\( { 
  /* matches elements with class=":`(" */
} 

Ein Element kann mehr als eine Klasse haben

<p class="intro blue">
  This paragraph will get styles from .intro and .blue selectors.
</p>

Ein Element mit mehreren Klassen wird mit den CSS-Regeln für jede Klasse gestylt. Sie können auch mehrere Klassen kombinieren, um Elemente auszuwählen

/* only selects elements with BOTH of these classes */
.intro.blue {
    font-size: 1.3em;
 }

Diese Demo zeigt, wie sich Single-Class-Selektoren von kombinierten Selektoren unterscheiden

Sie können einen Klassenselektor auch auf eine bestimmte Art von Element beschränken, was manchmal als „Tag-Qualifizierung“ bezeichnet wird

ul.menu {
  list-style: none;
}

Spezifität

Für sich allein hat ein Klassenselektor einen Spezifitätswert von 0, 0, 1, 0. Das ist „mächtiger“ als ein Elementselektor (wie: a { }), aber weniger mächtig als ein ID-Selektor (wie #header { }). Die Spezifität steigt, wenn Sie Klassenselektoren kombinieren oder den Selektor auf ein bestimmtes Element beschränken.

Zugriff auf Klassen mit JavaScript

Sie können die Klassen eines Elements mit classList in JavaScript lesen und manipulieren. Zum Beispiel könnte das Hinzufügen einer Klasse so aussehen

document.getElementById('italicize').classList.add('italic'); 

Diese Demo zeigt grundlegende Beispiele für die Verwendung von classList

jQuery hat auch Methoden zur Interaktion mit Klassen, darunter .addClass(), .removeClass(), .toggleClass() und .hasClass().

Weitere Informationen

• Lesen Sie die W3C-Spezifikation für Klassenselektoren.
• Erfahren Sie mehr über semantische Klassennamen.
• Erfahren Sie mehr über Spezifität.
• Erfahren Sie mehr über den Unterschied zwischen Klassen und IDs.
• Erfahren Sie mehr über Mehrfachklassenselektoren und Klassen-/ID-Selektorkombinationen.
• Erfahren Sie mehr über die .classList API.
• Erfahren Sie mehr über Klassenmanipulation in jQuery.

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Alle	Alle	Alle	Alle	Alle	Alle	Alle