đź’ˇ 1. CSS-Selektoren & Kombinatoren
Selektoren bestimmen, welche HTML-Elemente durch Stylesheets formatiert werden:
/* 1. Typ-Selektor (Spezifität 0-0-1): */
h2 { color: #1e293b; }
/* 2. Klassen-Selektor (Spezifität 0-1-0): */
.badge { background: #38bdf8; padding: 4px 8px; border-radius: 4px; }
/* 3. ID-Selektor (Spezifität 1-0-0): */
#hero-section { background: #0f172a; color: white; }
/* 4. Kombinatoren: */
ul > li { list-style: square; } /* Kind-Kombinator (direkte Kinder) */
article p { line-height: 1.6; } /* Nachfahren-Kombinator */
h2 + p { font-size: 1.1rem; } /* Direkt nachfolgender Nachbar */
a[target="_blank"] { color: #818cf8; } /* Attribut-Selektor */✨ 2. Pseudo-Klassen: Interaktion & Struktur
Mit Pseudo-Klassen stylst du Elemente basierend auf Benutzerinteraktion oder Position im DOM:
/* Interaktion: */
.btn:hover { background-color: #2563eb; transform: translateY(-2px); }
.input-field:focus { outline: 2px solid #38bdf8; border-color: transparent; }
/* Struktur & Positionierung: */
li:first-child { font-weight: bold; }
tr:nth-child(even) { background-color: #f8fafc; } /* Zebra-Streifen */
tr:nth-child(odd) { background-color: #ffffff; }⚖️ 3. Die CSS-Spezifitäts-Pyramide (A-B-C)
Wenn zwei CSS-Regeln dasselbe Element ansprechen, gewinnt die mit der höheren Spezifität:
Level 4: Inline-Styles (style="...") -> 1-0-0-0
Level 3: ID-Selektoren (#nav, #main) -> 0-1-0-0
Level 2: Klassen, Attribute & Pseudo-Klassen (.card, [type="text"], :hover) -> 0-0-1-0
Level 1: Element- & Pseudo-Element-Selektoren (p, h1, div, ::before) -> 0-0-0-1
🚦 Didaktische Analogie: Der Behörden-Dienstgrad
Ein Typ-Selektor p ist der einfache Bürger. Eine Klasse .wichtig ist der Abteilungsleiter (überstimmt den Bürger). Eine ID #chef-notiz ist der Ministerpräsident (überstimmt Klassen und Typen).
Goldene Regel: Verwende im modernen CSS fast ausschließlich Klassen (.class), um Spezifitätskriege und die Verwendung von !important zu vermeiden!
🧠Diagnostischer Selbst-Check
Überprüfe dein Verständnis der Kernkonzepte und typischen Denkfallen, bevor du den Code in der Web-IDE schreibst.