Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >Klassenselektor (.klasse)

Klassenselektor (.klasse)

.klasse .klasse1.klasse2

Wählt Elemente, die im Attribut class die angegebene Klasse haben. Ein Element kann mehrere durch Leerzeichen getrennte Klassen haben (class="button primary"), und jede davon wählt es. Der häufigste Weg zu stylen; die Spezifität ist 0-1-0.

Werte

  • .button – Elemente mit der Klasse button (an beliebiger Stelle unter den Klassen des Elements).
  • .button.primary – ohne Leerzeichen: Das Element muss beide Klassen haben; die Spezifitäten addieren sich (0-2-0).
  • .menu .item – mit Leerzeichen: ein Element mit der Klasse item innerhalb eines Elements mit der Klasse menu.
  • a.button – nur Links mit der Klasse button (0-1-1).

Beispiele

Ein Grund-Button und seine Hauptvariante – die zweite Klasse ergänzt nur die Unterschiede:

<a class="button" href="#">Zurück</a>
<a class="button primary" href="#">Senden</a>

.button {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid #0088d1;
  border-radius: 6px;
  color: #0088d1;
  text-decoration: none;
}
.button.primary {
  background: #0088d1;
  color: #fff;
}
Ergebnis

Worauf Sie achten sollten

  • Bei Klassennamen zählt die Groß- und Kleinschreibung: .Card wählt class="card" nicht. Die Ausnahme ist eine Seite im Quirks-Modus (ohne <!DOCTYPE html>), wo Klassen ohne Rücksicht auf die Schreibweise verglichen werden.
  • Eine Klasse darf im Selektor nicht mit einer Ziffer beginnen: .2columns ist ein Fehler und der Browser verwirft die ganze Regel. Benennen Sie die Klasse um (.columns-2) oder schreiben Sie die Ziffer maskiert: .\32 columns. In JavaScript erledigt das CSS.escape() für Sie.
  • Die Reihenfolge der Klassen im Attribut class spielt keine Rolle. Welche Regel gewinnt, entscheiden die Spezifität und die Reihenfolge der Regeln im CSS, nicht die Reihenfolge der Klassen im HTML.
  • Lange Ketten (.menu .item .link span) erhöhen die Spezifität und lassen sich schwer überschreiben; meist genügt eine gut benannte Klasse.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
ID-Selektor (#id)
Attributselektor ([attribut])
Nachfahrenkombinator (Leerzeichen)
Selektorliste (,)
Spezifität und Kaskade