CSS-Selektoren sind das Fundament jeder modernen Webseite – sie bestimmen, welche HTML-Elemente gestylt werden und wie präzise diese Ansprache erfolgt. Ob einfache Element-Selektoren, Klassen mit dem Punkt-Operator oder IDs mit der Raute: Wer CSS-Selektoren versteht, hat die volle Kontrolle über das Design seiner Website. In diesem umfassenden Crashkurs erklären wir alle wichtigen Selektor-Typen, zeigen praxisnahe Beispiele und geben Tipps zur optimalen Nutzung – von den Grundlagen bis hin zu fortgeschrittenen Techniken wie Pseudo-Klassen, Attribut-Selektoren und der entscheidenden Spezifitäts-Berechnung.
Was sind CSS-Selektoren?
CSS-Selektoren sind Muster, mit denen der Browser bestimmt, auf welche HTML-Elemente eine bestimmte Stilregel angewendet wird. Ohne Selektoren wäre CSS nutzlos – sie sind die Brücke zwischen dem HTML-Dokument und den visuellen Gestaltungsanweisungen. Jede CSS-Regel besteht aus einem Selektor und einem Deklarationsblock mit Eigenschaft-Wert-Paaren.
Das grundlegende Prinzip ist einfach: Der Selektor zeigt auf ein oder mehrere Elemente, und die geschweiften Klammern enthalten die Styling-Anweisungen. Je präziser der Selektor, desto gezielter wird das Styling angewendet.
eigenschaft: wert;
eigenschaft: wert;
}
Die Grundlagen: Element-, Klassen- und ID-Selektoren
Element-Selektor (Typ-Selektor)
Der einfachste Selektor spricht HTML-Tags direkt über ihren Namen an. Er wirkt auf alle Elemente dieses Typs auf der gesamten Seite. Das ist nützlich für grundlegende Basis-Styles, kann aber schnell zu ungewollten Seiteneffekten führen, wenn man nicht aufpasst.
p { font-size: 16px; line-height: 1.6; }
div { margin: 10px 0; }
a { color: #2980b9; text-decoration: none; }
Klassen-Selektor (.)
Der Klassen-Selektor ist das Arbeitspferd im CSS-Alltag. Er wird mit einem Punkt (.) eingeleitet und spricht alle Elemente an, die das entsprechende class-Attribut tragen. Klassen können beliebig oft pro Seite verwendet werden, und ein einzelnes Element kann mehrere Klassen gleichzeitig besitzen.
<div class=„card“>Inhalt</div>
<div class=„card highlight“>Hervorgehoben</div>
<p class=„card“>Auch ein Card</p>
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.highlight {
border-left: 4px solid #2ecc71;
background: #eafaf1;
}
Das Prinzip der Mehrfachklassen ist extrem mächtig: Mit class="card highlight active" kann ein Element drei unabhängige Stilregeln kombinieren. So entsteht modulares, wiederverwendbares CSS.
ID-Selektor (#)
Der ID-Selektor wird mit einer Raute (#) eingeleitet und spricht genau ein einziges Element pro Seite an. IDs haben eine deutlich höhere Spezifität als Klassen – das kann schnell zu Problemen führen, wenn man sie zu oft fürs Styling einsetzt.
background: linear-gradient(135deg, #1a5276, #2980b9);
color: #ffffff;
padding: 20px;
}
Übersicht: Alle Selektor-Typen im Vergleich
Element
Spricht HTML-Tags direkt an.
p { } div { }
Spezifität: 0-0-1
Klasse (.)
Wiederverwendbar, beliebig oft.
.card { } .active { }
Spezifität: 0-1-0
ID (#)
Einmalig pro Seite, hohe Spezifität.
#header { } #nav { }
Spezifität: 1-0-0
Universal (*)
Trifft auf jedes Element zu.
* { box-sizing: border-box; }
Spezifität: 0-0-0
Kombinatoren: Elemente in Beziehung zueinander ansprechen
Kombinatoren verbinden zwei oder mehr Selektoren und definieren die Beziehung zwischen den Elementen. Damit lassen sich sehr präzise Styling-Regeln erstellen, ohne zusätzliche Klassen im HTML vergeben zu müssen.
Nachfahren-Selektor (Leerzeichen)
Der Nachfahren-Selektor (ein einfaches Leerzeichen) trifft auf alle Elemente zu, die irgendwo innerhalb eines übergeordneten Elements verschachtelt sind – egal wie tief.
Kind-Selektor (>)
Der Kind-Selektor trifft nur auf direkte Kindelemente zu – also Elemente, die genau eine Ebene tiefer liegen. Das ist präziser als der Nachfahren-Selektor und verhindert ungewollte Seiteneffekte bei tiefer verschachtelten Strukturen.
Nachbar-Selektor (+)
Der Nachbar-Selektor (Adjacent Sibling) trifft auf das unmittelbar folgende Geschwisterelement zu. Damit lässt sich zum Beispiel der erste Absatz nach einer Überschrift besonders stylen.
Allgemeiner Geschwister-Selektor (~)
Der allgemeine Geschwister-Selektor trifft auf alle folgenden Geschwisterelemente zu – nicht nur das unmittelbar nächste.
Kombinatoren-Referenz im Überblick
| Kombinator | Syntax | Beschreibung | Beispiel |
|---|---|---|---|
| Nachfahre | A B |
B irgendwo innerhalb von A | .nav a |
| Kind | A > B |
B als direktes Kind von A | .menu > li |
| Nachbar | A + B |
B direkt nach A (gleiche Ebene) | h2 + p |
| Geschwister | A ~ B |
Alle B nach A (gleiche Ebene) | h2 ~ p |
Attribut-Selektoren: Elemente nach Attributen ansprechen
Attribut-Selektoren sind besonders mächtig, wenn man Elemente nicht über Klassen oder IDs, sondern über ihre HTML-Attribute ansprechen möchte. Das ist zum Beispiel bei Formularen, Links oder data-*-Attributen extrem nützlich.
Exakte Übereinstimmung
input[type=“text“] { border: 2px solid #3498db; }
/* Links die auf „_blank“ öffnen */
a[target=“_blank“] { color: #e74c3c; }
Teilweise Übereinstimmung
CSS bietet verschiedene Operatoren, um Attributwerte nur teilweise abzugleichen – ideal für dynamische Inhalte und CMS-generierte Klassen.
| Operator | Bedeutung | Beispiel | Trifft auf |
|---|---|---|---|
[attr^="wert"] |
Beginnt mit | a[href^="https"] |
Alle HTTPS-Links |
[attr$="wert"] |
Endet mit | img[src$=".webp"] |
Alle WebP-Bilder |
[attr*="wert"] |
Enthält | [class*="btn"] |
Alle Elemente mit „btn“ in der Klasse |
[attr~="wert"] |
Wort in Liste | [data-tags~="sale"] |
Elemente mit „sale“ als separatem Wort |
[attr|="wert"] |
Beginnt mit (Sprache) | [lang|="de"] |
de, de-DE, de-AT … |
a[href*="shopify.com"] für alle Shopify-Links.
Pseudo-Klassen: Zustände und Positionen
Pseudo-Klassen sprechen Elemente in einem bestimmten Zustand oder an einer bestimmten Position im DOM an. Sie werden mit einem Doppelpunkt (:) geschrieben und sind unverzichtbar für interaktives CSS.
Zustands-Pseudo-Klassen
:hover
Mauszeiger befindet sich über dem Element. Der Klassiker für interaktive Effekte bei Links, Buttons und Karten.
:focus
Element hat den Fokus (z.B. per Mausklick oder Tab-Taste). Essenziell für Barrierefreiheit bei Formularen.
:active
Element wird gerade angeklickt (Mausklick gedrückt). Nützlich für Button-Feedback.
:visited
Link wurde bereits besucht. Farbe und einige Eigenschaften können angepasst werden.
input:focus { outline: 3px solid #2980b9; box-shadow: 0 0 8px rgba(41,128,185,0.3); }
button:active { transform: scale(0.98); }
.checkbox:checked + label { font-weight: bold; color: #27ae60; }
Struktur-Pseudo-Klassen
Struktur-Pseudo-Klassen ermöglichen es, Elemente basierend auf ihrer Position innerhalb des Elternelements auszuwählen – ohne zusätzliche Klassen im HTML.
li:first-child { font-weight: bold; }
/* Letztes Listenelement */
li:last-child { border-bottom: none; }
/* Jedes zweite Element (Zebra-Streifen) */
tr:nth-child(even) { background: #f8f9fa; }
/* Jedes dritte Element */
li:nth-child(3n) { color: #2980b9; }
/* Einziges Kind */
p:only-child { font-style: italic; }
/* Leeres Element */
div:empty { display: none; }
Negation und Auswahl
input:not([type=“submit“]) { border: 1px solid #ccc; }
/* Paragraphen die eine bestimmte Klasse NICHT haben */
p:not(.intro) { font-size: 14px; }
Pseudo-Elemente: Virtuelle Teile eines Elements
Pseudo-Elemente erzeugen virtuelle Elemente im DOM, die im HTML nicht existieren. Sie werden mit doppeltem Doppelpunkt (::) geschrieben und ermöglichen Styling, das ohne zusätzliches HTML-Markup funktioniert.
p::first-line { font-variant: small-caps; font-weight: 600; }
/* Erster Buchstabe (Initiale) */
.article p:first-of-type::first-letter {
font-size: 3em;
float: left;
margin-right: 8px;
color: #1a5276;
}
/* Inhalt vor einem Element */
.external-link::after {
content: “ ↗“;
font-size: 0.8em;
}
/* Dekorative Linie unter Überschriften */
h2::after {
content: „“;
display: block;
width: 60px;
height: 3px;
background: #2980b9;
margin-top: 8px;
}
:before, :after) funktioniert aus Kompatibilitätsgründen noch, aber die korrekte CSS3-Schreibweise verwendet zwei Doppelpunkte (::before, ::after).
Spezifität: Welche Regel gewinnt?
Wenn mehrere CSS-Regeln auf dasselbe Element zutreffen, entscheidet die Spezifität (Specificity), welche Regel angewendet wird. Dieses Konzept ist einer der häufigsten Stolpersteine für Webentwickler – und gleichzeitig einer der wichtigsten Faktoren für sauberen, wartbaren CSS-Code.
So wird Spezifität berechnet
Jeder Selektor bekommt einen Spezifitätswert nach dem Schema (Inline, ID, Klasse, Element). Die Regel mit dem höchsten Wert gewinnt:
Spezifitäts-Hierarchie
!important arbeiten muss, hat meistens ein Architektur-Problem. Die Ausnahme: Utility-Klassen wie .hidden { display: none !important; }.
Die Kaskade bei gleicher Spezifität
Bei identischer Spezifität gewinnt die Regel, die im Stylesheet weiter unten (oder später im Dokument) steht. Das ist die sogenannte Kaskadenregel – daher der Name Cascading Style Sheets.
.text { color: red; } /* ← gewinnt (steht weiter unten) */
Fortgeschrittene Selektoren für die Praxis
Mehrfach-Selektoren (Gruppierung)
Mit einem Komma lassen sich mehrere Selektoren zusammenfassen, die denselben Stil erhalten sollen:
font-family: ‚Segoe UI‘, sans-serif;
color: #1a5276;
}
.btn-primary, .btn-secondary, .btn-outline {
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
}
Verkettete Selektoren (ohne Leerzeichen)
Selektoren ohne Leerzeichen zwischen sich sprechen Elemente an, die alle Bedingungen gleichzeitig erfüllen:
a.active { font-weight: bold; }
/* Nur <div>-Elemente mit der ID #content */
div#content { max-width: 960px; }
/* Elemente die BEIDE Klassen haben */
.card.featured { border: 2px solid gold; }
Praxisbeispiel: WordPress und Shopify Themes
In der täglichen Arbeit mit Content-Management-Systemen wie WordPress oder Shopify kommt man häufig in Situationen, in denen die Theme-Styles überschrieben werden müssen. Hier zeigt sich die Stärke kombinierter Selektoren:
.sidebar .widget_recent_posts ul > li { padding: 8px 0; }
/* Shopify: Produkt-Karten im Collection-Grid */
.collection-grid .card-product:hover .card-product__title {
color: #2980b9;
}
/* WooCommerce: Preis-Anzeige nur im Single-Product */
.single-product .summary .price .amount {
font-size: 24px;
color: #27ae60;
}
Selektor-Cheatsheet: Die wichtigsten Selektoren auf einen Blick
| Selektor | Beispiel | Beschreibung |
|---|---|---|
* | * | Alle Elemente |
element | p | Alle <p>-Elemente |
.klasse | .card | Alle Elemente mit class=“card“ |
#id | #header | Element mit id=“header“ |
A B | .nav a | A-Nachfahren vom Typ B |
A > B | ul > li | Direkte Kinder |
A + B | h2 + p | Direkter Nachbar |
A ~ B | h2 ~ p | Alle folgenden Geschwister |
[attr] | [disabled] | Hat das Attribut |
[attr="x"] | [type="email"] | Attribut ist genau „x“ |
:hover | a:hover | Maus über Element |
:nth-child() | li:nth-child(odd) | Ungerade Listenelemente |
::before | .icon::before | Virtuelles Element davor |
::after | .link::after | Virtuelles Element danach |
:not() | input:not(.big) | Negation |
Häufige Fehler und wie man sie vermeidet
Selbst erfahrene Webentwickler tappen gelegentlich in typische Selektor-Fallen. Hier die häufigsten Stolpersteine – und wie man sie umgeht:
Zu hohe Spezifität
Wer IDs im CSS nutzt und dann mit !important gegensteuern muss, hat ein strukturelles Problem. Lösung: Konsequent Klassen verwenden.
Zu lange Selektor-Ketten
body .page .main .content .article p span – Das ist fragil und bricht bei jeder HTML-Änderung. Lösung: Maximal 3 Ebenen tief.
Universal-Selektor missbrauchen
* { margin: 0; padding: 0; } als Reset kann Performance kosten. Besser: Gezielte Resets für tatsächlich betroffene Elemente.
Klasse vs. Element verwechseln
div { } stylt ALLE divs. .container { } nur die mit der Klasse. Im Zweifelsfall: Immer Klassen verwenden.
Was ist der Unterschied zwischen Klasse (.) und ID (#) in CSS?
Eine Klasse wird mit einem Punkt (.) angesprochen und kann beliebig oft pro Seite verwendet werden. Eine ID wird mit einer Raute (#) angesprochen und sollte nur einmal pro Seite vorkommen. IDs haben eine höhere Spezifität als Klassen, weshalb in der modernen Webentwicklung empfohlen wird, IDs nur für JavaScript und Anker-Links zu verwenden und CSS-Styling ausschließlich über Klassen zu steuern.
Was bedeutet Spezifität in CSS und warum ist sie wichtig?
Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere Regeln auf dasselbe Element zutreffen. Die Berechnung folgt dem Schema: Inline-Styles (1000) > IDs (100) > Klassen (10) > Elemente (1). Wer die Spezifität versteht, vermeidet typische Probleme wie überschriebene Styles und den übermäßigen Einsatz von !important.
Was ist ein Nachfahren-Selektor und wie unterscheidet er sich vom Kind-Selektor?
Der Nachfahren-Selektor (Leerzeichen, z.B. .nav a) trifft auf alle verschachtelten Elemente zu, egal wie tief sie liegen. Der Kind-Selektor (>, z.B. .menu > li) trifft nur auf direkte Kindelemente zu – also Elemente, die genau eine Ebene tiefer liegen. Der Kind-Selektor ist präziser und verhindert ungewollte Seiteneffekte.
Was sind Pseudo-Klassen und Pseudo-Elemente in CSS?
Pseudo-Klassen (mit einem Doppelpunkt, z.B. :hover, :focus, :nth-child) sprechen Elemente in einem bestimmten Zustand oder an einer bestimmten Position an. Pseudo-Elemente (mit doppeltem Doppelpunkt, z.B. ::before, ::after, ::first-line) erzeugen virtuelle Elemente, die im HTML-Code nicht existieren, aber gestylt werden können – z.B. für dekorative Elemente oder Icons.
Wie spreche ich HTML-Elemente nach ihren Attributen an?
Mit Attribut-Selektoren in eckigen Klammern: [attr] prüft ob das Attribut existiert, [attr=“wert“] auf exakte Übereinstimmung, [attr^=“wert“] ob der Wert beginnt mit, [attr$=“wert“] ob er endet mit, und [attr*=“wert“] ob er den Wert enthält. Besonders nützlich bei Formular-Inputs (input[type=“email“]) oder Links (a[href^=“https“]).
Warum sollte man !important in CSS vermeiden?
!important überschreibt alle normalen Spezifitätsregeln und macht CSS-Code schwer wartbar. Wenn eine Regel mit !important überschrieben werden muss, hilft nur ein weiteres !important – das führt zu einer Eskalationsspirale. Besser: Spezifität bewusst niedrig halten, konsequent Klassen verwenden und CSS-Architektur sauber aufbauen. Die einzige Ausnahme sind Utility-Klassen wie .hidden { display: none !important; }.
Letzte Bearbeitung am Freitag, 27. März 2026 – 9:08 Uhr von Alex, Webmaster für Google und Bing SEO.
