CSS – Selektoren

1. Was sind CSS-Selektoren?

CSS-Selektoren bestimmen, welche HTML-Elemente durch CSS gestaltet werden.

Ein Selektor steht am Anfang einer CSS-Regel. Danach folgen die Eigenschaften und Werte.

Beispiel

p {
    color: blue;
    font-size: 18px;
}

In diesem Beispiel ist p der Selektor. Alle passenden Absätze erhalten die definierte Textfarbe und Schriftgröße.

2. Typselektor (Elementselektor)

Ein Typselektor wählt alle HTML-Elemente eines bestimmten Typs aus.

CSS-Code

p {
    color: blue;
}

Ergebnis

Alle drei Absätze werden blau dargestellt.

3. Klassenselektor (class)

Klassen werden mit einem Punkt vor dem Klassennamen angesprochen.

HTML-Code

<p class="wichtig">
    Wichtiger Text
</p>

CSS-Code

.wichtig {
    color: red;
    font-weight: bold;
}

Ergebnis

4. ID-Selektor

Ein ID-Selektor wird mit dem Zeichen # angesprochen.

HTML-Code

<p id="besonderer-text">
    Besonderer Absatz
</p>

CSS-Code

#besonderer-text {
    background: lightyellow;
    color: brown;
}

Ergebnis

5. Unterschied zwischen class und id

6. Universalselektor (*)

Der Universalselektor wählt alle Elemente aus, die in seinem Geltungsbereich liegen.

CSS-Code

* {
    box-sizing: border-box;
}

Diese Regel wird häufig verwendet, um das Box-Modell einheitlich einzustellen.

Ergebnis eines begrenzten Selektors

7. Gruppenselektor

Mehrere Selektoren können mit Kommas kombiniert werden.

CSS-Code

h1, h2, p {
    color: green;
}

Ergebnis

8. Nachfahrenselektor (Leerzeichen)

Ein Nachfahrenselektor wählt Elemente aus, die sich innerhalb eines anderen Elements befinden.

CSS-Code

article p {
    color: purple;
}

Ergebnis

Nur der Absatz innerhalb von article wird lila dargestellt.

9. Kindselektor (>)

Der Kindselektor wählt nur direkte Kindelemente aus.

CSS-Code

.container > p {
    color: red;
}

Ergebnis

10. Benachbarter Geschwisterselektor (+)

Mit dem Pluszeichen wird ein Element ausgewählt, das direkt nach einem anderen Element folgt.

CSS-Code

h4 + p {
    background: lightblue;
}

Ergebnis

11. Allgemeiner Geschwisterselektor (~)

Mit der Tilde werden passende nachfolgende Geschwisterelemente ausgewählt.

CSS-Code

h4 ~ p {
    color: green;
}

Ergebnis

12. Attributselektoren

Attributselektoren wählen Elemente anhand ihrer HTML-Attribute aus.

CSS-Code

input[type="email"] {
    border: 2px solid blue;
}

Ergebnis

Nur das Eingabefeld mit type="email" erhält einen blauen Rahmen.

13. Pseudoklassen (:hover)

Pseudoklassen beschreiben besondere Zustände oder Positionen eines Elements.

CSS-Code

a:hover {
    background-color: green;
}

Ergebnis

Häufige Pseudoklassen

14. :first-child

Die Pseudoklasse :first-child wählt ein Element aus, wenn es das erste Kind seines Elternteils ist.

CSS-Code

p:first-child {
    background: lightblue;
}

Ergebnis

15. :nth-child()

Mit :nth-child() können Elemente anhand ihrer Position ausgewählt werden.

CSS-Code

li:nth-child(even) {
    background: lightblue;
}

Ergebnis

even bedeutet gerade Positionen. odd bedeutet ungerade Positionen.

16. Pseudoelemente (::before und ::after)

Pseudoelemente ermöglichen die Gestaltung bestimmter Teile eines Elements.

CSS-Code

.hinweis::before {
    content: "★ ";
    color: gold;
}

.erfolg::after {
    content: " ✓";
    color: green;
}

Ergebnis

17. ::first-letter

Mit ::first-letter kann der erste Buchstabe eines Textblocks gestaltet werden.

CSS-Code

p::first-letter {
    font-size: 35px;
    color: blue;
}

Ergebnis

18. CSS-Spezifität

Wenn mehrere CSS-Regeln für dasselbe Element gelten, hilft die Spezifität dabei, zu entscheiden, welche Deklaration Vorrang erhält.

Vereinfachte Übersicht

CSS-Code

p {
    color: blue;
}

.highlight {
    color: green;
}

#priority-text {
    color: red;
}

Ergebnis

Der Text ist rot, weil der ID-Selektor eine höhere Spezifität als der Klassen- und Typselektor besitzt.

19. Interaktiver Selektor-Test

Wählen Sie einen CSS-Selektor aus. Die passenden Elemente werden grün hervorgehoben.

20. Häufige Fehler

21. Praktische Übungen

p {
    color: blue;
}

.wichtig {
    font-weight: bold;
}

#header {
    background: blue;
}

h1, h2, h3 {
    color: navy;
}

article p {
    color: green;
}

div > p {
    color: red;
}

button:hover {
    background-color: green;
}

li:nth-child(even) {
    background: lightgray;
}

input[type="password"] {
    border: 2px solid red;
}

22. Zusammenfassung

CSS-Selektoren bestimmen, welche HTML-Elemente gestaltet werden.

Die wichtigsten Grundselektoren sind Typselektoren, Klassenselektoren und ID-Selektoren.

Kombinatoren ermöglichen die Auswahl anhand der HTML-Struktur. Pseudoklassen und Pseudoelemente erweitern die Gestaltungsmöglichkeiten.

Die CSS-Spezifität spielt eine wichtige Rolle, wenn mehrere Regeln auf dasselbe Element angewendet werden.