CSS INTENSIVSTATION

CSS-Selektoren

Selektoren bestimmen, welche HTML-Elemente von einer CSS-Regel angesprochen werden. Sie legen fest, welche Elemente im Dokument tatsächlich gestaltet werden.

Elementselektoren

Der einfachste Selektor. Er wirkt auf alle Elemente dieses Typs.

h1 { color: green; }
                    
body { background-color: gray;}

Alle <h1> werden grün dargestellt, der Hintergrund des gesamten Dokuments ist grau.

Gruppenselektoren

Mehrere Selektoren können zusammengefasst werden. Die Trennung erfolgt mit Kommas.

h2, h3 { color: gray; }

Die Regel gilt gleichzeitig für h2 und h3.

Kontextsensitive Selektoren

Kontextsensitive Selektoren (auch: Nachfahren-Selektoren) treffen ein Element nur dann, wenn es innerhalb eines bestimmten Kontextes vorkommt. Du beschreibst damit nicht nur welches Element, sondern auch wo es stehen muss.

h1 { color: red;}
                    
h1 a { color: blue; }

h1 a bedeutet: „ein a-Element, das irgendwo im h1 liegt“. So kannst du Links im Titel anders stylen als Links im restlichen Inhalt.

Wofür nutzt man Kontext?

  • nav a – Navigation-Links anders gestalten als normale Links
  • article p – Text im Artikel anders behandeln als Text in der Sidebar
  • .card h3 – Überschriften innerhalb einer Komponente gezielt stylen

Praxis-Regel: Kontext ist ideal, wenn du Bereiche wie Navigation, Footer oder Sidebar sauber trennen willst. Wenn Selektoren zu lang werden, ist oft eine zusätzliche Klasse die bessere Lösung.

Klassenselektoren

Klassen werden über das Attribut class vergeben und können beliebig oft wiederverwendet werden. Der Klassenname ist ein frei gewählter Bezeichner (z.B. .button, .karte, .warning).

CSS

.blau { color: blue; }

HTML

<p class="blau">Dieser Text ist blau</p>

Wie benennt man Klassen?

  • Erlaubt sind Buchstaben, Zahlen, Bindestrich und Unterstrich (z.B. .btn-primary, .card_2).
  • Best Practice: nicht mit einer Zahl beginnen. Technisch geht das, aber in CSS ist dann oft ein Escape nötig – unnötig kompliziert.
  • Wähle Namen nach Bedeutung/Funktion (z.B. .button, .is-active) statt nach Aussehen (z.B. .blue), wenn du Komponenten langfristig pflegen willst.

Klassen können auch an ein bestimmtes Element gebunden werden. In diesem Fall gilt die Regel nur für dieses Element in Kombination mit der Klasse. 

h2.rot { color: red; }
<h2 class="rot">Rote Überschrift</h2>

Die Klasse rot wirkt hier nur auf h2-Elemente. Ein <h1 class="rot"> würde von dieser Regel nicht angesprochen.

  • Eine Klasse allein (.rot) ist allgemein.
  • Eine Klasse mit Element (h2.rot) ist elementgebunden.

Mehrere Klassen kombinieren

Ein Element kann mehrere Klassen besitzen. Die Klassen werden durch Leerzeichen getrennt.

Normales Absatz-Element

<p>Inhalt</p>

Eingerückter Absatz

Dieser Absatz wird über die Klasse zitat eingerückt. 

<p class="zitat">Inhalt</p>

Absatz mit Farbe

Dieser Absatz erhält seine Farbe über eine Klasse. 

<p class="deeppink">Inhalt</p>

Kombination mehrerer Klassen

Dieser Absatz ist eingerückt und farbig. Beide Klassen wirken gleichzeitig auf dasselbe Element. 

<p class="deeppink zitat">Inhalt</p>

ID-Selektoren

IDs identifizieren ein Element eindeutig. Eine ID darf im Dokument nur einmal vorkommen. 

<div id="logo">LOGO</div>

#logo {
    background-color: green;
}

ID und Klassen kombinieren

IDs definieren die Struktur, Klassen variieren das Erscheinungsbild. Dieses Muster wird häufig bei Layout-Elementen eingesetzt.

HTML

<div id="banner" class="produkte"></div>
<div id="banner" class="ueberuns"></div>

CSS

.produkte {
    background-image: url(images/produkte.jpg);
}

.ueberuns {
    background-image: url(images/ueberuns.jpg);
}

Kurz gesagt

Selektoren definieren was gestylt wird. Kontextselektoren definieren zusätzlich wo es stehen muss. Klassen sind flexibel, IDs eindeutig.