Klasse - CSS-Tricks | CSS-Almanach 2025

Eine Klassenauswahl in CSS beginnt mit einem Punkt (.) Wie folgt:

.class ( )

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

Zum Beispiel dieses Element:

Push Me

wird wie folgt ausgewählt und gestaltet:

.big-button ( font-size: 60px; )

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

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

Ein Element kann mehr als eine Klasse haben:


 This paragraph will get styles from .intro and .blue selectors.

Ein Element mit mehreren Klassen wird mit den CSS-Regeln für jede Klasse gestaltet. 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 Einzelklassenselektoren von kombinierten Selektoren unterscheiden:

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

ul.menu ( list-style: none; )

Spezifität

Ein Klassenselektor hat für sich genommen einen Spezifitätswert von 0, 0, 1, 0. Das ist „leistungsfähiger“ als ein Elementselektor (wie :), a ( )aber weniger leistungsfähig als ein ID-Selektor (wie #header ( )). Die Spezifität erhöht sich, 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 classListin JavaScript lesen und bearbeiten. Das Hinzufügen einer Klasse könnte beispielsweise folgendermaßen aussehen:

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

Diese Demo zeigt grundlegende Beispiele für die classListVerwendung:

jQuery hat auch Methoden für die Klassen interagieren, einschließlich .addClass(), .removeClass(), .toggleClass(), und .hasClass().

Mehr Informationen

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