Ausführbare CSS-Docs: CSS Klassen

Q: Wie wählt man in CSS eine Klasse aus?

Schreib einen Punkt und dann den Klassennamen: .card { ... } stylt jedes Element mit class="card". Der Punkt steht nur im CSS; im HTML-Attribut gibt es keinen Punkt.

Q: Wie wähle ich ein Element aus, das zwei Klassen hat?

Verkette die Klassenselektoren ohne Leerzeichen: .btn.primary trifft Elemente, die beide Klassen haben. Mit Leerzeichen bedeutet .btn .primary ein .primary-Element innerhalb eines .btn-Elements.

Der Klassenselektor

Ein Klassenselektor ist ein Punkt, gefolgt von einem Klassennamen. Er stylt jedes Element, dessen class-Attribut diesen Namen enthält, egal welcher Elementtyp.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

Der Punkt steht nur im CSS. Im HTML lautet das Attribut class="badge", ohne Punkt. Klassennamen unterscheiden Groß- und Kleinschreibung: .Badge trifft class="badge" nicht.

Mehrere Klassen an einem Element

Ein Element kann beliebig viele Klassen tragen, getrennt durch Leerzeichen. Jede bringt ihre eigenen Regeln mit, und so baust du Varianten aus kleinen Bausteinen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

.btn.danger, ohne Leerzeichen, trifft Elemente, die beide Klassen haben. Das letzte span hat danger, aber nicht btn, also überspringt es die verkettete Regel.

Varianten des Klassenselektors

Selektor	Trifft
`.note`	Jedes Element mit der Klasse `note`
`p.note`	Nur `<p>`-Elemente mit der Klasse `note`
`.btn.primary`	Elemente mit `btn` und `primary`
`.card .title`	Ein `.title` irgendwo in einer `.card`
`.card > .title`	Ein `.title`, dessen Elternelement eine `.card` ist
`.a, .b`	Elemente mit `a` oder `b`

Den Unterschied zwischen Leerzeichen und keinem Leerzeichen erklärt die Seite zu CSS Selektoren, zusammen mit weiteren Kombinatoren.

Der ID-Selektor

Ein ID-Selektor ist eine Raute, gefolgt von der id: #site-header stylt das Element mit id="site-header". Eine id muss auf der Seite eindeutig sein, ein ID-Selektor trifft also genau ein Element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

Ids können mehr als stylen: href="#details" scrollt zum Element, <label for="email"> verweist auf die id eines Eingabefelds, und JavaScript findet es mit document.getElementById('details'). Das ist der übliche Grund, einem Element eine id zu geben; zum Stylen ist eine Klasse das bessere Werkzeug.

Klasse vs. ID

	Klasse `.name`	ID `#name`
Pro Seite	Viele Elemente	Ein Element
Pro Element	Mehrere, durch Leerzeichen getrennt	Eine
Spezifität	(0,1,0)	(1,0,0)
Linkziel (`#name` in einer URL)	Nein	Ja
Am besten für	Styling	Anker, Labels, Einstiegspunkte für JavaScript

Der Unterschied in der Spezifität ist der praktische Grund, mit Klassen zu stylen. Eine ID schlägt beliebig viele Klassen, also lässt sich eine mit ID geschriebene Regel nur durch eine andere ID, einen Inline-Style oder !important überschreiben:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

Klassen mit JavaScript hinzufügen und entfernen

Klassen sind der normale Weg, wie JavaScript das Aussehen von etwas ändert: Das CSS definiert die Zustände, das Skript schaltet nur um.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList hat außerdem add, remove, contains und replace. Weise className nicht direkt zu: Das ersetzt alle Klassen, die das Element hatte.

Klassen benennen

Buchstaben, Ziffern, Bindestriche und Unterstriche sind sicher: card, card-title, card__title, is-open.
Beginne einen Selektor nicht mit einer Ziffer oder einem Bindestrich gefolgt von einer Ziffer. .2col ist ungültiges CSS. Fang mit einem Buchstaben an (.cols-2) oder maskiere die Ziffer (.\32 col).
Benenne nach Zweck, nicht nach Aussehen: .error übersteht ein Redesign, .red-text nicht.
In größeren Projekten hilft eine Namenskonvention. BEM schreibt block__element--modifier, zum Beispiel .card__title--large.

Häufige Fehler

Den Punkt ins HTML schreiben. class=".badge" trifft .badge nie.
Zwei class-Attribute. <p class="a" class="b"> behält nur a. Nimm class="a b".
Ein Leerzeichen, obwohl beide Klassen gemeint sind. .btn .primary sucht ein verschachteltes Element; .btn.primary ist dasselbe Element.
Eine id mehrfach verwenden. Doppelte ids machen getElementById, Ankerlinks und die Zuordnung von Labels kaputt, auch wenn das CSS zu funktionieren scheint.
Alles mit ids stylen. Ihre Spezifität macht spätere Überschreibungen mühsam; nimm Klassen.

Häufig gestellte Fragen

Wie wählt man in CSS eine Klasse aus?

Schreib einen Punkt und dann den Klassennamen: .card { ... } stylt jedes Element mit class="card". Der Punkt steht nur im CSS; im HTML-Attribut gibt es keinen Punkt.

Was ist der Unterschied zwischen class und id in CSS?

Eine Klasse kannst du an beliebig vielen Elementen verwenden, und ein Element kann mehrere haben; eine id muss auf der Seite eindeutig sein, und ein Element hat höchstens eine. In CSS hat #id eine viel höhere Spezifität als .class, deshalb sind ID-Regeln schwerer zu überschreiben.

Wie gebe ich einem Element zwei Klassen?

Trenne die Namen in einem einzigen Attribut mit einem Leerzeichen: class="btn primary". Zweimal class an einem Element funktioniert nicht; der Browser behält nur das erste Attribut.

Wie wähle ich ein Element aus, das zwei Klassen hat?

Verkette die Klassenselektoren ohne Leerzeichen: .btn.primary trifft Elemente, die beide Klassen haben. Mit Leerzeichen bedeutet .btn .primary ein .primary-Element innerhalb eines .btn-Elements.

Darf ein CSS-Klassenname mit einer Zahl beginnen?

Im HTML schon, aber ein Selektor darf nicht mit einer unmaskierten Ziffer beginnen, also ist .1col ungültiges CSS. Maskiere die Ziffer (.\31 col) oder, besser, lass Klassennamen mit einem Buchstaben beginnen.

Verwandte Konzepte