Selektoren Grundlagen

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 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?

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.

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.

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.

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.

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.

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.

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.