Selektoren Grundlagen

Zuletzt aktualisiert am 10. Februar 2026

Selektoren sind das Herzstück von CSS. Sie bestimmen, welche HTML-Elemente von deinen Stil-Regeln betroffen sind. Ohne Selektoren wüsste der Browser nicht, wo er deine Farben, Abstände und Schriftgrößen anwenden soll.

Was ist ein Selektor?

Ein Selektor steht am Anfang jeder CSS-Regel und zeigt auf ein oder mehrere HTML-Elemente:

Selektor {
  Eigenschaft: Wert;
}

Der Selektor ist die Adresse. Die Deklarationen im Block sind die Anweisungen. Je präziser die Adresse, desto gezielter das Ergebnis.

Der Element-Selektor

Der einfachste Selektor: Du schreibst den Tag-Namen hin, und alle Elemente dieses Typs werden gestaltet.

h2 {
  color: #7c3aed;
}

p {
  color: #374151;
  line-height: 1.6;
}

<h2>Überschrift</h2>
<p>Erster Absatz.</p>
<p>Zweiter Absatz.</p>

Beide <p>-Elemente werden gestaltet, weil der Selektor p auf alle Absätze zielt. Das ist praktisch für globale Basis-Styles, aber manchmal zu breit. Was, wenn du nur einen bestimmten Absatz anders gestalten willst?

Der Klassen-Selektor

Mit Klassen markierst du einzelne Elemente im HTML und sprichst sie gezielt in CSS an. Eine Klasse wird mit einem Punkt (.) eingeleitet:

.highlight {
  background: #fef3c7;
  padding: 4px 8px;
  border-radius: 4px;
}

.error {
  color: #dc2626;
  font-weight: bold;
}

<p>Ein normaler Absatz.</p>
<p class="highlight">Dieser Absatz ist hervorgehoben.</p>
<p class="error">Fehler: Etwas ist schiefgelaufen.</p>

Wichtige Punkte zu Klassen:

• Im HTML schreibst du class="name" (ohne Punkt)
• Im CSS schreibst du .name (mit Punkt)
• Ein Element kann mehrere Klassen haben: class="highlight error"
• Dieselbe Klasse kann auf beliebig viele Elemente angewendet werden

Klassen sind der wichtigste Selektor in der Praxis. Sie sind wiederverwendbar, flexibel und haben eine moderate Spezifität.

Der ID-Selektor

Eine ID identifiziert ein einziges, eindeutiges Element. Im CSS wird sie mit einer Raute (#) eingeleitet:

#main-title {
  color: #1a56db;
  font-size: 24px;
  border-bottom: 3px solid #1a56db;
  padding-bottom: 8px;
}

<h2 id="main-title">Die Hauptüberschrift</h2>
<p>Ein Absatz unter der Überschrift.</p>

IDs vs. Klassen:

• Jede ID darf pro Seite nur einmal vergeben werden
• IDs haben eine höhere Spezifität als Klassen, sind also schwerer zu überschreiben
• IDs werden auch für Anker-Links (#section) und JavaScript (getElementById) genutzt

Empfehlung: Verwende IDs für Navigation und JavaScript. Für CSS-Styling sind Klassen fast immer die bessere Wahl, weil sie flexibler und einfacher zu pflegen sind.

Der Universal-Selektor

Das Sternchen (*) trifft auf jedes Element:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h2>Überschrift ohne Abstand</h2>
<p>Absatz mit eigenem Padding.</p>
<ul>
<li>Listen-Element</li>
</ul>

Der Universal-Selektor wird oft für CSS-Resets eingesetzt: Alle Standard-Abstände auf null setzen und danach gezielt eigene Styles definieren. Im Alltag brauchst du ihn selten, aber es ist gut zu wissen, dass es ihn gibt.

Der Attribut-Selektor

Du kannst Elemente auch anhand ihrer Attribute auswählen. Der Selektor steht in eckigen Klammern:

input[type="text"] {
  border: 2px solid #3b82f6;
  padding: 8px;
  border-radius: 4px;
}

input[type="submit"] {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
}

<input type="text" placeholder="Dein Name">
<br><br>
<input type="submit" value="Absenden">

Attribut-Selektoren sind besonders nützlich für Formulare, wo verschiedene <input>-Typen unterschiedlich gestaltet werden sollen. Es gibt noch Varianten wie [href^="https"] (beginnt mit) oder [class*="btn"] (enthält), aber die Grundform reicht für den Anfang.

Selektoren gruppieren

Wenn mehrere Selektoren dieselben Styles bekommen sollen, kannst du sie mit einem Komma gruppieren:

h2, h3, h4 {
  color: #7c3aed;
  margin-bottom: 8px;
}

<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<p>Ein normaler Absatz.</p>

Statt denselben Code dreimal zu schreiben, definierst du ihn einmal für alle drei. Sauberer, kürzer, einfacher zu pflegen.

Welchen Selektor wann verwenden?

Faustregel: Nutze Klassen als Standard-Selektor. Element-Selektoren für globale Basis-Styles. IDs nur, wenn du sie für Navigation oder JavaScript brauchst. Attribut-Selektoren für Sonderfälle wie Formular-Inputs.

Häufige Fehler

• Punkt bei Klassen vergessen: highlight { } im CSS funktioniert nicht. Es muss .highlight { } sein (mit Punkt). Ohne Punkt sucht der Browser nach einem HTML-Element namens <highlight>.
• Raute bei IDs vergessen: Gleicher Fehler wie bei Klassen. main-title { } statt #main-title { }.
• ID mehrfach vergeben: Wenn zwei Elemente dieselbe ID haben, ist das ungültiges HTML. Der Browser styled oft nur das erste, und JavaScript findet ebenfalls nur das erste.
• Zu spezifische Selektoren: div.container ul.nav-list li.nav-item a.nav-link { } ist viel zu lang. .nav-link { } reicht meistens aus. Je einfacher der Selektor, desto leichter ist er zu pflegen und zu überschreiben.
• ID für wiederholte Styles verwenden: Wenn mehrere Elemente denselben Style bekommen sollen, verwende eine Klasse, keine ID.

Zusammenfassung

Du kennst jetzt die wichtigsten Basis-Selektoren. Im nächsten Artikel geht es um erweiterte Selektoren: Kombinatoren, Pseudo-Klassen und Pseudo-Elemente, mit denen du noch gezielter auf bestimmte Elemente zugreifen kannst.