CSS Selektoren Übersicht
Hier ist eine umfassendere, gruppierte Tabelle der CSS-Selektoren:
Basis-Selektoren
Abschnitt betitelt „Basis-Selektoren“| Selektor | Syntax | Beschreibung | Beispiel |
|---|---|---|---|
| Universalselektor | - | Wählt alle Elemente im Dokument aus, ohne Ausnahme. | * { margin: 0; padding: 0; } |
| Elementselektor | elementname | Wählt alle HTML-Elemente des angegebenen Typs aus. Grundlegendster Selektor, der auf Tag-Namen basiert. | p { line-height: 1.5; } |
| ID-Selektor | #id | Wä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 | .klasse | Wä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; } |
| Gruppierungsselektor | sel1, sel2 | Wendet 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“| Selektor | Syntax | Beschreibung | Beispiel |
|---|---|---|---|
| Nachfahren-Selektor | vorfahre nachfahre | Wä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-Selektor | eltern > kind | Wählt nur direkte Kind-Elemente aus, keine tiefer verschachtelten Nachfahren. Bietet präzisere Kontrolle als der Nachfahren-Selektor. | nav > ul { margin: 0; } |
| Geschwister-Selektor | elem1 ~ elem2 | Wählt alle Geschwister-Elemente nach dem ersten Element aus, die den gleichen Elternteil haben. | h2 ~ p { margin-top: 10px; } |
| Direkter Geschwister-Selektor | elem1 + elem2 | Wä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“| Selektor | Syntax | Beschreibung | Beispiel |
|---|---|---|---|
| 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“| Selektor | Syntax | Beschreibung | Beispiel |
|---|---|---|---|
| Hover-Pseudoklasse | :hover | Wird 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 | :focus | Wird 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 | :active | Wird angewendet, wenn ein Element aktiviert wird (z.B. während eines Mausklicks). | button:active { transform: translateY(1px); } |
| First-child-Pseudoklasse | :first-child | Wählt ein Element aus, das das erste Kind seines Elternelements ist. | li:first-child { border-top: none; } |
| Last-child-Pseudoklasse | :last-child | Wä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-letter | Wä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-line | Wählt die erste Textzeile eines Elements aus. | p::first-line { font-variant: small-caps; } |
| Before-Pseudoelement | ::before | Erzeugt ein Pseudoelement als erstes Kind des ausgewählten Elements. Muss content-Eigenschaft haben. | h2::before { content: "➤"; color: blue; margin-right: 5px; } |
| After-Pseudoelement | ::after | Erzeugt ein Pseudoelement als letztes Kind des ausgewählten Elements. Muss content-Eigenschaft haben. | a[href^="http"]::after { content: " ↗"; font-size: 80%; } |
| Placeholder-Pseudoelement | ::placeholder | Stilisiert den Platzhaltertext in Eingabefeldern. | input::placeholder { color: #999; font-style: italic; } |
| Selection-Pseudoelement | ::selection | Stilisiert den Text, den der Benutzer markiert hat. | ::selection { background: yellow; color: black; } |
Erweiterte Selektoren und Kombinationen
Abschnitt betitelt „Erweiterte Selektoren und Kombinationen“| Selektor | Syntax | Beschreibung | Beispiel |
|---|---|---|---|
| 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 Attributselektoren | sel[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 Kombinatoren | sel1 > sel2 + sel3 | Kombiniert 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:
-
Alle Links im Footer, die beim Überfahren mit der Maus ihre Farbe ändern sollen:
-
Das letzte Produkt in der Produktliste:
-
Jedes zweite Produkt (ungerade Indizes):
-
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.