CSS Selektoren - Elemente gezielt ansprechen

Selektoren sind das Herzstück von CSS. Sie sagen dem Browser, welche HTML-Elemente du stylen willst.

Was sind Selektoren?

Ein CSS-Selektor ist wie eine Adresse für HTML-Elemente:

selektor {
    eigenschaft: wert;
}

Beispiel:

p {
    color: blue;
}

Das bedeutet: "Alle <p>-Elemente sollen blauen Text haben."

Die 3 Basis-Selektoren

1. Element-Selektor (Tag-Selektor)

Spricht alle Elemente eines Typs an:

/* Alle Überschriften h1 */
h1 {
    color: red;
    font-size: 32px;
}

/* Alle Absätze p */
p {
    color: gray;
    line-height: 1.6;
}

/* Alle Links a */
a {
    color: blue;
    text-decoration: none;
}

Wann nutzen?

• ✅ Basis-Styling für alle Elemente eines Typs
• ✅ Globale Regeln (z.B. alle p mit Zeilenabstand)
• ❌ Nicht für spezifische Elemente

2. Klassen-Selektor

Spricht Elemente mit einer bestimmten Klasse an:

/* HTML */
<p class="highlight">Dieser Text ist hervorgehoben</p>
<p>Normaler Text</p>
<div class="highlight">Auch hervorgehoben</div>

/* CSS */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

Wichtig:

• Klassen-Selektor beginnt mit einem Punkt (.)
• Eine Klasse kann mehrfach verwendet werden
• Ein Element kann mehrere Klassen haben

Mehrere Klassen:

/* HTML */
<p class="highlight important">Wichtiger Text</p>

/* CSS */
.highlight {
    background-color: yellow;
}

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

3. ID-Selektor

Spricht ein einziges, eindeutiges Element an:

/* HTML */
<div id="header">Header-Bereich</div>

/* CSS */
#header {
    background-color: navy;
    color: white;
    padding: 20px;
}

Wichtig:

• ID-Selektor beginnt mit einer Raute (#)
• Eine ID darf nur einmal pro Seite vorkommen
• IDs haben höhere Priorität als Klassen

Element + Klasse kombinieren

Du kannst spezifischer werden:

/* Nur p-Elemente mit class="intro" */
p.intro {
    font-size: 18px;
    font-weight: bold;
}

/* Nur div-Elemente mit class="box" */
div.box {
    border: 1px solid black;
}

Universal-Selektor *

Spricht alle Elemente an:

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

Wann nutzen?

• ✅ CSS-Reset (Standardabstände entfernen)
• ✅ Box-sizing global setzen
• ❌ Nicht für normale Styles (Performance!)

Mehrere Selektoren gruppieren

Gleiche Styles für mehrere Elemente:

/* Alle h1, h2 und h3 */
h1, h2, h3 {
    color: navy;
    font-family: Arial, sans-serif;
}

/* Mehrere Klassen */
.error, .warning, .info {
    padding: 10px;
    border-radius: 5px;
}

.error {
    background-color: #ffcccc;
}

.warning {
    background-color: #fff3cd;
}

Vorteil: Weniger Code-Wiederholung!

Kombinatoren - Selektoren kombinieren

Nachfahren-Selektor (Leerzeichen)

Spricht alle Nachfahren an (egal wie tief verschachtelt):

/* Alle p innerhalb von article */
article p {
    color: gray;
}

/* Alle a innerhalb von nav */
nav a {
    color: white;
    text-decoration: none;
}

HTML:

<article>
    <p>Wird angesprochen</p>
    <div>
        <p>Auch angesprochen!</p>
    </div>
</article>

Kind-Selektor >

Spricht nur direkte Kinder an:

/* Nur direkte p-Kinder von article */
article > p {
    font-weight: bold;
}

HTML:

<article>
    <p>Wird angesprochen</p>
    <div>
        <p>Wird NICHT angesprochen!</p>
    </div>
</article>

Nachbar-Selektor +

Spricht das direkt folgende Geschwister-Element an:

/* p direkt nach h2 */
h2 + p {
    font-size: 18px;
    color: #666;
}

HTML:

<h2>Überschrift</h2>
<p>Wird angesprochen</p>
<p>Wird NICHT angesprochen</p>

Geschwister-Selektor ~

Spricht alle folgenden Geschwister an:

/* Alle p nach h2 (auf gleicher Ebene) */
h2 ~ p {
    margin-left: 20px;
}

Attribut-Selektoren

Spricht Elemente anhand ihrer Attribute an:

/* Alle Links mit target-Attribut */
a[target] {
    background-color: yellow;
}

/* Links mit target="_blank" */
a[target="_blank"] {
    color: red;
}

/* Inputs vom type="text" */
input[type="text"] {
    border: 2px solid blue;
}

/* Links die mit https:// beginnen */
a[href^="https://"] {
    color: green;
}

/* Bilder die auf .jpg enden */
img[src$=".jpg"] {
    border: 2px solid gray;
}

/* Elemente mit "button" im Klassennamen */
[class*="button"] {
    cursor: pointer;
}

Operatoren:

• [attr] - Attribut existiert
• [attr="wert"] - Exakter Wert
• [attr^="wert"] - Beginnt mit
• [attr$="wert"] - Endet mit
• [attr*="wert"] - Enthält

Praktisches Beispiel - Navigation

/* HTML */
<nav class="main-nav">
    <ul>
        <li><a href="/" class="active">Home</a></li>
        <li><a href="/about">Über uns</a></li>
        <li><a href="/contact">Kontakt</a></li>
    </ul>
</nav>

/* CSS */
/* Navigation Container */
.main-nav {
    background-color: #333;
    padding: 10px 0;
}

/* Alle Links in der Navigation */
.main-nav a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
}

/* Hover-Effekt für Links */
.main-nav a:hover {
    background-color: #555;
}

/* Aktiver Link */
.main-nav a.active {
    background-color: #007bff;
}

/* Liste ohne Punkte */
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Listen-Elemente nebeneinander */
.main-nav li {
    display: inline-block;
}

Spezifität - Wer gewinnt?

Wenn mehrere Regeln auf ein Element passen, entscheidet die Spezifität:

Rangfolge (von schwach zu stark):

1. Element-Selektor (p)
2. Klassen-Selektor (.text)
3. ID-Selektor (#header)
4. Inline-Style (style="")
5. !important (Notfalllösung)

/* Schwach: Element */
p {
    color: blue;
}

/* Stärker: Klasse */
.highlight {
    color: red;  /* Gewinnt! */
}

/* Noch stärker: ID */
#special {
    color: green;  /* Gewinnt! */
}

/* Stärkste: !important */
p {
    color: purple !important;  /* Gewinnt! Aber vermeiden! */
}

Berechnung:

• ID = 100 Punkte
• Klasse = 10 Punkte
• Element = 1 Punkt

#header .nav a { }  /* 100 + 10 + 1 = 111 */
.nav .item { }      /*  10 + 10 = 20 */
div p { }           /*   1 +  1 = 2 */

Best Practices

✅ DO:

1. Klassen bevorzugen (flexibel, wiederverwendbar)
2. Aussagekräftige Namen (.button-primary statt .btn1)
3. BEM-Namenskonvention (.block__element--modifier)
4. Gruppierte Selektoren für weniger Code
5. Kombinatoren sparsam einsetzen

❌ DON'T:

1. IDs für Styling vermeiden (nur für JavaScript/Anker)
2. Nicht zu spezifisch (.header .nav ul li a ist zu viel!)
3. !important vermeiden (außer Notfälle)
4. Keine kryptischen Namen (.x123 ist schlecht)
5. Nicht zu viele Klassen (max. 2-3 pro Element)

Häufige Anfängerfehler

Fehler 1: Punkt/Raute vergessen

❌ FALSCH:

highlight {  /* Fehler: Wird als Element-Selektor interpretiert! */
    color: red;
}

✅ RICHTIG:

.highlight {  /* Klasse braucht einen Punkt! */
    color: red;
}

Fehler 2: IDs mehrfach verwenden

❌ FALSCH:

<div id="box">Box 1</div>
<div id="box">Box 2</div>  <!-- Fehler: ID doppelt! -->

✅ RICHTIG:

<div class="box">Box 1</div>
<div class="box">Box 2</div>

Fehler 3: Klassen im CSS ohne Punkt

❌ FALSCH:

<p class="intro">Text</p>

<style>
intro {  /* Fehler: Sucht nach <intro>-Element! */
    color: blue;
}
</style>

✅ RICHTIG:

.intro {  /* Punkt für Klassen! */
    color: blue;
}

/* Externe Links automatisch markieren */
a[href^="http"]::after {
    content: " ↗";
    font-size: 0.8em;
}

/* Alle Download-Links */
a[href$=".pdf"]::before {
    content: "📄 ";
}

/* Email-Links */
a[href^="mailto:"] {
    color: #007bff;
    text-decoration: underline;
}

/* Alle Links außer in der Navigation */
a:not(.nav-link) {
    color: #007bff;
}

/* Alle Buttons außer disabled */
button:not(:disabled):hover {
    background-color: #0056b3;
}

/* Alle divs außer mit Klasse .special */
div:not(.special) {
    margin-bottom: 20px;
}

/* Niedrige Spezifität = gut */
.button { }              /* 10 Punkte */
.button.primary { }      /* 20 Punkte */

/* Hohe Spezifität = schwer zu überschreiben */
#header .nav .item { }   /* 111 Punkte - zu hoch! */

/* Erstes <p> direkt nach <h2> */
h2 + p {
    font-size: 1.25rem;
    color: #666;
}

/* Alle <li> außer das letzte mit Border */
li:not(:last-child) {
    border-bottom: 1px solid #eee;
}

/* Jedes 3. Element ab dem 2. */
.gallery-item:nth-child(3n+2) {
    margin-top: 20px;
}

Übungsaufgaben

Aufgabe 1: Basis-Selektoren

Erstelle CSS für:

• Alle h2 rot
• Alle Elemente mit Klasse .highlight gelber Hintergrund
• Element mit ID #main 80% Breite

Aufgabe 2: Kombinatoren

Erstelle eine Navigation:

• Links in nav weiß
• Direktes p nach h2 größer
• Alle li ohne Listenpunkte

Aufgabe 3: Spezifische Selektoren

Style folgendes HTML:

<article class="blog-post">
    <h2>Titel</h2>
    <p class="intro">Einleitung</p>
    <p>Normaler Text</p>
</article>

• .blog-post h2 blau
• .blog-post .intro fett und größer
• Alle anderen p grau

Nächste Schritte

Du kennst jetzt:

• ✅ Element-, Klassen- und ID-Selektoren
• ✅ Kombinatoren (Nachfahren, Kinder, Geschwister)
• ✅ Attribut-Selektoren
• ✅ Spezifität

Als Nächstes lernst du:

• Farben in CSS (hex, rgb, hsl)
• Text & Schrift stylen
• Box Model (margin, padding, border)

Weiter so! 🚀