Lädt...

CSS-Selektoren

Eine CSS-Regel muss zwei Dinge klären: wen sie stylen soll und wie. Das „Wie“ hast du schon mit Eigenschaften, Werten und Einheiten geübt. In dieser Lektion geht es um das „Wen“ – also um den Selektor am Anfang der Regel.

Was sind CSS-Selektoren?

Ein Selektor ist ein Muster, mit dem der Browser erkennt, auf welche HTML-Elemente der Deklarationsblock angewendet werden soll. Passt der Selektor auf ein Element der Seite, bekommt dieses Element alle Stile aus den geschweiften Klammern { }.

Die Grundtypen im Überblick

Starte mit diesen vier. Kombinatoren, Attribut-Selektoren und Pseudoklassen kommen in späteren Lektionen dazu. Werde erst mit Element, class, id und * sicher.

📊 Grundlegende CSS-Selektoren

Selektor Trifft Beispiel
Element (Typ) Alle Elemente mit diesem Tag-Namen p { … }
class Elemente mit diesem class-Attribut .card { … }
id Das eine Element mit dieser eindeutigen id #hero { … }
Universal Jedes Element (sparsam einsetzen) * { … }

Element-Selektoren (Typ)

Ein Elementselektor ist einfach der Tag-Name – ohne Punkt, ohne Raute. h1 stylt jede <h1> auf der Seite, p jeden Absatz. Das ist das gröbste Werkzeug im Alltag, ideal für eine einheitliche Grundgestaltung eines Tags.

Element-Selektoren für Überschriften und Absätze

css
CSS Code 
h1 {
color: #0f766e;
font-size: 2rem;
}

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

Wann Typ-Selektoren sinnvoll sind

Nimm sie für seitenweite Grundwerte: Textfarbe im body, Schriftstärke der Überschriften, Abstände von Listen. Sollen nur manche Absätze besonders aussehen, nimm lieber eine class, statt alle p umzugestalten.

class-Selektoren

Ein class-Selektor beginnt mit einem Punkt (.), gefolgt vom class-Namen. Im HTML markierst du Elemente mit class="card". Eine class darf auf beliebig vielen Elementen stehen – genau deshalb ist sie das Arbeitstier für wiederverwendbares Design.

class-Selektor für wiederverwendbare Karten

css
CSS Code 
.card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 1rem;
border-radius: 8px;
}

Das HTML muss zum class-Namen passen

Das CSS .card stylt nur Elemente, die wirklich class="card" tragen (oder mehrere classes, darunter card). Die Schreibweise muss exakt stimmen: .Card und .card sind zwei verschiedene Selektoren.

id-Selektoren

Ein id-Selektor beginnt mit einer Raute (#), gefolgt vom id-Namen. Im HTML schreibst du id="hero". Eine id muss auf der Seite eindeutig sein – also nur ein einziges Element. Nimm für das meiste Styling lieber classes und spare dir die id für einen wirklich einmaligen Fixpunkt auf.

id-Selektor für ein einmaliges Banner

css
CSS Code 
#hero {
min-height: 40vh;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}

Der Universalselektor (*)

Der Universalselektor * trifft jedes Element. Manchmal dient er für einen einfachen Reset, zum Beispiel für box-sizing. Wer damit aber alles mit Farben oder Abständen versieht, arbeitet schnell gegen das eigene Layout. Für das normale Aussehen sind gezielte Selektoren besser.

Universalselektor mit Bedacht eingesetzt

css
CSS Code 
* {
box-sizing: border-box;
}

Selektoren auf einer Seite kombinieren

Echte Stylesheets mischen die Typen: Grundwerte per Elementselektor, wiederverwendbare Bausteine per class und seltene Einzelziele per id. Das kleine Stylesheet unten zeigt diese Gewohnheit – nicht jede Regel braucht eine id.

Kleine Mischung der Selektortypen auf einer Seite

css
CSS Code 
body {
font-family: Georgia, serif;
margin: 0;
}

.card {
max-width: 28rem;
margin: 1rem;
}

#hero {
padding: 2rem;
}

class oder id? Eine praktische Faustregel

  • Nimm classes für Buttons, Karten, Navigationslinks und alles, was du wiederverwenden könntest
  • Nimm eine id nur, wenn das Ziel wirklich einmalig ist (ein Seitenbanner, das eine Hauptsuchfeld)
  • Vergib nicht für jede gestylte Box eine neue id – das verhindert Wiederverwendung und macht dir in den Lektionen zur Kaskade später Probleme

Probier es selbst aus

  1. Füge einer Übungsseite ein <h1>, zwei <p>, ein <div class="card"> und eine <section id="hero"> hinzu.
  2. Schreibe eine Elementregel für h1 und p.
  3. Style .card mit Innenabstand (padding), hellem Hintergrund und Rahmen (border).
  4. Style #hero mit dunklem Hintergrund und hellem Text.
  5. Optional: Ergänze * { box-sizing: border-box; } und beobachte, dass sich der Innenabstand in der Karte berechenbarer verhält.

Häufige Fehler

  • card { } schreiben, obwohl .card { } gemeint war: Ohne Punkt sucht der Browser ein Element namens card, das es im HTML nicht gibt
  • hero { } statt #hero { } schreiben: Die Raute fehlt
  • Im HTML class="card", im CSS aber .crd: Kein Treffer, also kein Styling
  • Dieselbe id an mehrere Elemente vergeben: ungültiges HTML und unvorhersehbare Treffer
  • Nur Typ-Selektoren für einmalige Gestaltung verwenden: Dann ändert sich jedes p oder div, obwohl du nur einen Block meintest

Zusammenfassung

  • Selektoren legen fest, welche HTML-Elemente die Stile einer Regel erhalten
  • Elementselektoren bestehen aus dem Tag-Namen (h1, p)
  • class-Selektoren beginnen mit einem Punkt (.card) und passen auf das class-Attribut im HTML
  • id-Selektoren beginnen mit einer Raute (#hero) und sollen genau ein eindeutiges Element treffen
  • * trifft alles – nützlich für einen bewussten Reset, nicht für die ganze Gestaltung
  • Nimm classes für wiederverwendbare Oberflächen und setze ids selten und nur für Einzelfälle ein

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial