Zum Inhalt springen
IBAW Web Engineer
Ein Cheatsheet gibt es hier: Hier klicken

CSS Selektoren Übersicht

Zu normalem Modus wechseln

Hier ist eine umfassendere, gruppierte Tabelle der CSS-Selektoren:

Basis-Selektoren

Abschnitt betitelt „Basis-Selektoren“
SelektorSyntaxBeschreibungBeispiel
Universalselektor-Wählt alle Elemente im Dokument aus, ohne Ausnahme.* { margin: 0; padding: 0; }
ElementselektorelementnameWählt alle HTML-Elemente des angegebenen Typs aus. Grundlegendster Selektor, der auf Tag-Namen basiert.p { line-height: 1.5; }
ID-Selektor#idWählt ein einzelnes Element mit der angegebenen ID aus. IDs müssen im Dokument einzigartig sein, daher sollte dieser Selektor auf genau ein Element abzielen.#header { position: sticky; top: 0; }
Klassenselektor.klasseWählt alle Elemente aus, die die angegebene Klasse haben. Mehrere Elemente können dieselbe Klasse teilen, und ein Element kann mehrere Klassen haben..highlight { background-color: yellow; }
Gruppierungsselektorsel1, sel2Wendet die gleichen Stile auf mehrere Selektoren an. Ermöglicht effizienteres CSS durch Reduzierung von Wiederholungen.h1, h2, h3 { font-family: 'Arial', sans-serif; }

Kombinator-Selektoren

Abschnitt betitelt „Kombinator-Selektoren“
SelektorSyntaxBeschreibungBeispiel
Nachfahren-Selektorvorfahre nachfahreWählt alle Nachfahren-Elemente aus, unabhängig davon, wie tief sie verschachtelt sind. Findet alle passenden Elemente innerhalb eines bestimmten Vorfahren.article p { font-size: 16px; }
Kind-Selektoreltern > kindWählt nur direkte Kind-Elemente aus, keine tiefer verschachtelten Nachfahren. Bietet präzisere Kontrolle als der Nachfahren-Selektor.nav > ul { margin: 0; }
Geschwister-Selektorelem1 ~ elem2Wählt alle Geschwister-Elemente nach dem ersten Element aus, die den gleichen Elternteil haben.h2 ~ p { margin-top: 10px; }
Direkter Geschwister-Selektorelem1 + elem2Wählt nur das unmittelbar nachfolgende Geschwister-Element aus. Hilfreich für Styling-Muster wie “Absatz nach Überschrift”.h2 + p { font-weight: bold; }

Attribut-Selektoren

Abschnitt betitelt „Attribut-Selektoren“
SelektorSyntaxBeschreibungBeispiel
Attribut-Selektor[attribut]Wählt alle Elemente aus, die das angegebene Attribut besitzen, unabhängig vom Wert.[disabled] { cursor: not-allowed; opacity: 0.7; }
Attributwert-Selektor[attribut=“wert”]Wählt Elemente aus, deren Attributwert exakt dem angegebenen Wert entspricht.[type="checkbox"] { margin-right: 5px; }
Attributwert beginnt mit[attr^=“wert”]Wählt Elemente aus, deren Attributwert mit dem angegebenen String beginnt. Nützlich für Gruppen ähnlicher Elemente.[class^="btn-"] { padding: 8px 16px; border-radius: 4px; }
Attributwert endet mit[attr$=“wert”]Wählt Elemente aus, deren Attributwert mit dem angegebenen String endet. Ideal für Dateiendungen oder Suffixe.[href$=".pdf"] { background: url(pdf-icon.png) no-repeat; padding-left: 20px; }
Attributwert enthält[attr*=“wert”]Wählt Elemente aus, deren Attributwert den angegebenen String an beliebiger Stelle enthält.[title*="bild"] { border: 1px solid #ddd; }
Attributwert in Liste[attr~=“wert”]Wählt Elemente aus, deren Attributwert den angegebenen Wert als vollständiges, durch Leerzeichen getrenntes Wort enthält.[class~="active"] { font-weight: bold; }

Pseudoklassen und Pseudoelemente

Abschnitt betitelt „Pseudoklassen und Pseudoelemente“
SelektorSyntaxBeschreibungBeispiel
Hover-Pseudoklasse:hoverWird angewendet, wenn der Benutzer mit dem Mauszeiger über ein Element fährt. Häufig für interaktive Effekte verwendet.a:hover { text-decoration: underline; color: darkblue; }
Focus-Pseudoklasse:focusWird angewendet, wenn ein Element Fokus erhält (z.B. durch Klicken oder Tab-Navigation). Wichtig für Barrierefreiheit.input:focus { outline: 2px solid blue; background-color: lightyellow; }
Active-Pseudoklasse:activeWird angewendet, wenn ein Element aktiviert wird (z.B. während eines Mausklicks).button:active { transform: translateY(1px); }
First-child-Pseudoklasse:first-childWählt ein Element aus, das das erste Kind seines Elternelements ist.li:first-child { border-top: none; }
Last-child-Pseudoklasse:last-childWählt ein Element aus, das das letzte Kind seines Elternelements ist.li:last-child { border-bottom: none; }
Nth-child-Pseudoklasse:nth-child(n)Wählt Elemente basierend auf ihrer Position in einer Gruppe von Geschwistern aus. Akzeptiert Formeln wie odd, even, 3n+1.tr:nth-child(even) { background-color: #f2f2f2; }
Not-Pseudoklasse:not(selektor)Negationsselektor, der Elemente auswählt, die nicht dem angegebenen Selektor entsprechen.input:not([type="checkbox"]) { width: 100%; padding: 8px; }
Erstes-Zeichen Pseudoelement::first-letterWählt den ersten Buchstaben im Text eines Elements aus. Nützlich für Anfangsbuchstaben-Effekte.p::first-letter { font-size: 200%; font-weight: bold; }
Erste-Zeile Pseudoelement::first-lineWählt die erste Textzeile eines Elements aus.p::first-line { font-variant: small-caps; }
Before-Pseudoelement::beforeErzeugt ein Pseudoelement als erstes Kind des ausgewählten Elements. Muss content-Eigenschaft haben.h2::before { content: "➤"; color: blue; margin-right: 5px; }
After-Pseudoelement::afterErzeugt ein Pseudoelement als letztes Kind des ausgewählten Elements. Muss content-Eigenschaft haben.a[href^="http"]::after { content: " ↗"; font-size: 80%; }
Placeholder-Pseudoelement::placeholderStilisiert den Platzhaltertext in Eingabefeldern.input::placeholder { color: #999; font-style: italic; }
Selection-Pseudoelement::selectionStilisiert den Text, den der Benutzer markiert hat.::selection { background: yellow; color: black; }

Erweiterte Selektoren und Kombinationen

Abschnitt betitelt „Erweiterte Selektoren und Kombinationen“
SelektorSyntaxBeschreibungBeispiel
Attribut-Kombination[attr1][attr2]Wählt Elemente aus, die mehrere angegebene Attribute besitzen. Erhöht die Spezifität und Präzision.[type="text"][required] { border: 2px solid red; }
Verschachtelte Attributselektorensel[attr=“val” i]Das “i” am Ende macht den Selektor unempfindlich gegenüber Gross-/Kleinschreibung.[lang="en" i] { color: blue; }
:is() Funktionspseudoklasse:is(selektor1, selektor2)Gruppiert Selektoren; entspricht jedem der Selektoren in der Liste. Vereinfacht komplexe Selektoren.:is(header, main, footer) p { line-height: 1.6; }
:where() Funktionspseudoklasse:where(selektor1, selektor2)Ähnlich wie :is(), aber mit Spezifität von 0, was die Überschreibung erleichtert.:where(article, aside) h2 { font-size: 1.5rem; }
:has() Relationspseudoklasse:has(selektor)Wählt Elemente aus, die mindestens ein Element enthalten, das dem relativen Selektor entspricht.figure:has(figcaption) { border: 1px solid gray; padding: 10px; }
Komplex mit mehreren Kombinatorensel1 > sel2 + sel3Kombiniert verschiedene Kombinatoren für präzise Auswahl.ul > li:first-child + li { font-weight: bold; }

Diese umfangreiche Tabelle sollte Ihnen einen guten Überblick über die verschiedenen CSS-Selektoren, ihre Verwendungszwecke und praktische Anwendungsbeispiele geben. Die Gruppierung in Basis-, Kombinator-, Attribut- und Pseudoselektoren hilft dabei, die verschiedenen Konzepte zu organisieren und leichter zu verstehen.

CSS Selektoren: Übung mit Lösungen

Abschnitt betitelt „CSS Selektoren: Übung mit Lösungen“

Hier ist eine praktische Übung, um Ihr Verständnis der CSS-Selektoren zu testen und zu vertiefen:

Bonus-Herausforderung:

Abschnitt betitelt „Bonus-Herausforderung:“

Schreiben Sie einen Selektor für:

  1. Alle Links im Footer, die beim Überfahren mit der Maus ihre Farbe ändern sollen:

  2. Das letzte Produkt in der Produktliste:

  3. Jedes zweite Produkt (ungerade Indizes):

  4. Ein Pseudoelement, das vor jedem Produkttitel ein ”★” einfügt:

Diese Übung deckt eine Vielzahl von Selektoren ab und zeigt, wie Sie diese in realen Szenarien anwenden können.

War diese Seite hilfreich?