Lädt...
Vollständige CSS-Selektoren Referenz
Dieses umfassende Nachschlagewerk bietet Entwicklern eine vollständige Übersicht über alle CSS-Selektoren. Ziel ist es, eine schnelle und präzise Auswahl der richtigen Selektoren für jede Webentwicklungssituation zu ermöglichen. Die Referenz deckt grundlegende Selektoren, Kombinatoren, Attributselektoren, Pseudoklassen, Pseudoelemente, erweiterte Selektoren und Media Query-Selektoren ab. Entwickler können diese systematische Gliederung nutzen, um effizient Styles zuzuweisen, Browser-Kompatibilität zu prüfen und wiederverwendbare, saubere CSS-Strukturen zu erstellen. Die Beispiele sind praxisnah und sofort einsetzbar, ideal für die tägliche Frontend-Entwicklung.
📊 Basic Selectors
| Selektor | Syntax | Beschreibung | Beispiel | Browserunterstützung |
|---|---|---|---|---|
| * | * | Universalselektor – wählt alle Elemente aus | * { margin: 0; } | Alle Browser |
| element | tagname | Typselektor – wählt alle Elemente eines Typs | p { color: blue; } | Alle Browser |
| .class | .classname | Klassenselektor – wählt Elemente mit bestimmter Klasse | .highlight { background: yellow; } | Alle Browser |
| \#id | #idname | ID-Selektor – wählt Element mit bestimmter ID | #header { width: 100%; } | Alle Browser |
📊 Combinator Selectors
| Selektor | Syntax | Beschreibung | Beispiel | Browserunterstützung |
|---|---|---|---|---|
| descendant | A B | Nachfahrenselektor – wählt B innerhalb von A | div p { margin: 10px; } | Alle Browser |
| child | A > B | Kindselektor – wählt direktes Kind B von A | ul > li { list-style: none; } | IE7+ |
| adjacent sibling | A + B | Nachbarselektor – wählt B direkt nach A | h1 + p { font-weight: bold; } | IE7+ |
| general sibling | A \~ B | Allgemeiner Geschwisterselektor – wählt alle B nach A | h1 \~ p { color: gray; } | IE7+ |
📊 Attribute Selectors
| Selektor | Syntax | Beschreibung | Beispiel | Browserunterstützung |
|---|---|---|---|---|
| \[attribute] | \[attr] | Wählt Elemente mit angegebenem Attribut | \[disabled] { opacity: 0.5; } | IE7+ |
| \[attribute=value] | \[attr=val] | Wählt Elemente, deren Attribut gleich Wert ist | \[type="text"] { border: 1px solid; } | IE7+ |
| \[attribute\~=value] | \[attr\~=val] | Wählt Elemente, deren Attribut Wort enthält | \[class\~="button"] { cursor: pointer; } | IE7+ |
| \[attribute^=value] | \[attr^=val] | Wählt Elemente, deren Attribut mit Wert beginnt | \[href^="https"] { color: green; } | IE7+ |
| \[attribute\$=value] | \[attr\$=val] | Wählt Elemente, deren Attribut endet | \[src\$=".jpg"] { border: 2px solid; } | IE7+ |
| \[attribute*=value] | \[attr*=val] | Wählt Elemente, deren Attribut Wert enthält | \[title*="important"] { font-weight: bold; } | IE7+ |
| \[attribute="value" i] | \[attr="val" i] | Groß-/Kleinschreibung ignorieren | \[type="EMAIL" i] { text-transform: lowercase; } | Moderne Browser |
📊 Pseudo-class Selectors - Structural
| Selektor | Syntax | Beschreibung | Beispiel | Browserunterstützung |
|---|---|---|---|---|
| :first-child | :first-child | Erstes Kind-Element auswählen | p:first-child { margin-top: 0; } | IE7+ |
| :last-child | :last-child | Letztes Kind-Element auswählen | p:last-child { margin-bottom: 0; } | IE9+ |
| :nth-child(n) | :nth-child(n) | N-tes Kind-Element auswählen | tr:nth-child(2n) { background: #f0f0f0; } | IE9+ |
| :nth-last-child(n) | :nth-last-child(n) | N-tes Kind von hinten auswählen | li:nth-last-child(2) { color: red; } | IE9+ |
| :nth-of-type(n) | :nth-of-type(n) | N-tes Element eines Typs | h2:nth-of-type(odd) { color: blue; } | IE9+ |
| :nth-last-of-type(n) | :nth-last-of-type(n) | N-tes Element eines Typs von hinten | p:nth-last-of-type(1) { font-weight: bold; } | IE9+ |
| :first-of-type | :first-of-type | Erstes Element eines Typs | img:first-of-type { float: left; } | IE9+ |
| :last-of-type | :last-of-type | Letztes Element eines Typs | p:last-of-type { margin-bottom: 20px; } | IE9+ |
| :only-child | :only-child | Nur-Kind-Element auswählen | p:only-child { text-align: center; } | IE9+ |
| :only-of-type | :only-of-type | Einziges Element eines Typs | img:only-of-type { display: block; } | IE9+ |
| :empty | :empty | Elemente ohne Kinder auswählen | div:empty { display: none; } | IE9+ |
📊 Pseudo-class Selectors - User Action
| Selektor | Syntax | Beschreibung | Beispiel | Browserunterstützung |
|---|---|---|---|---|
| :hover | :hover | Element bei Maus-Hover auswählen | a:hover { color: red; } | Alle Browser |
| :active | :active | Element beim Aktivieren auswählen | button:active { transform: scale(0.95); } | Alle Browser |
| :focus | :focus | Element mit Fokus auswählen | input:focus { outline: 2px solid blue; } | Alle Browser |
| :focus-visible | :focus-visible | Sichtbar fokussiertes Element auswählen | button:focus-visible { outline: 2px solid; } | Moderne Browser |
| :focus-within | :focus-within | Element, das fokussiertes Kind enthält | form:focus-within { border: 1px solid blue; } | Moderne Browser |
📊 Pseudo-class Selectors - Form States
| Selektor | Syntax | Beschreibung | Beispiel | Browserunterstützung |
|---|---|---|---|---|
| :enabled | :enabled | Aktive Formularelemente auswählen | input:enabled { background: white; } | IE9+ |
| :disabled | :disabled | Deaktivierte Formularelemente auswählen | input:disabled { background: #f5f5f5; } | IE9+ |
| :checked | :checked | Ausgewählte Checkboxen/Radio Buttons | input:checked + label { font-weight: bold; } | IE9+ |
| :indeterminate | :indeterminate | Indeterminate Checkbox | input:indeterminate { opacity: 0.5; } | IE9+ |
| :valid | :valid | Gültige Formularelemente | input:valid { border-color: green; } | IE10+ |
| :invalid | :invalid | Ungültige Formularelemente | input:invalid { border-color: red; } | IE10+ |
| :required | :required | Erforderliche Felder | input:required { border-left: 3px solid red; } | IE10+ |
| :optional | :optional | Optionale Felder | input:optional { border-left: 3px solid gray; } | IE10+ |
| :read-only | :read-only | Nur-Lese Felder | input:read-only { background: #f9f9f9; } | Moderne Browser |
| :read-write | :read-write | Bearbeitbare Felder | input:read-write { background: white; } | Moderne Browser |
| :placeholder-shown | :placeholder-shown | Felder mit Placeholder | input:placeholder-shown { font-style: italic; } | Moderne Browser |
| :in-range | :in-range | Wert innerhalb Bereich | input:in-range { border-color: green; } | Moderne Browser |
| :out-of-range | :out-of-range | Wert außerhalb Bereich | input:out-of-range { border-color: red; } | Moderne Browser |
📊 Pseudo-class Selectors - Link States
| Selektor | Syntax | Beschreibung | Beispiel | Browserunterstützung |
|---|---|---|---|---|
| :link | :link | Unbesuchte Links | a:link { color: blue; } | Alle Browser |
| :visited | :visited | Besuchte Links | a:visited { color: purple; } | Alle Browser |
| :any-link | :any-link | Alle Links | a:any-link { text-decoration: underline; } | Moderne Browser |
| :target | :target | Ziel der aktuellen URL | :target { background: yellow; } | IE9+ |
📊 Pseudo-class Selectors - Logical
| Selektor | Syntax | Beschreibung | Beispiel | Browserunterstützung |
|---|---|---|---|---|
| :not(selector) | :not(sel) | Nicht-Übereinstimmende Elemente | p:not(.special) { color: gray; } | IE9+ |
| :is(selector) | :is(sel1, sel2) | Elemente passend zu beliebigem Selektor | :is(h1, h2, h3) { margin-top: 0; } | Moderne Browser |
| :where(selector) | :where(sel1, sel2) | Wie :is(), aber Spezifität 0 | :where(h1, h2) { color: blue; } | Moderne Browser |
| :has(selector) | :has(sel) | Elemente mit bestimmtem Inhalt | div:has(img) { border: 1px solid; } | Moderne Browser |
📊 Pseudo-element Selectors
| Selektor | Syntax | Beschreibung | Beispiel | Browserunterstützung |
|---|---|---|---|---|
| ::before | ::before | Inhalt vor Element einfügen | p::before { content: "→ "; } | IE9+ (single colon IE8+) |
| ::after | ::after | Inhalt nach Element einfügen | p::after { content: " ←"; } | IE9+ (single colon IE8+) |
| ::first-line | ::first-line | Erste Zeile auswählen | p::first-line { font-weight: bold; } | IE9+ (single colon IE6+) |
| ::first-letter | ::first-letter | Ersten Buchstaben auswählen | p::first-letter { font-size: 2em; } | IE9+ (single colon IE6+) |
| ::selection | ::selection | Ausgewählten Text auswählen | ::selection { background: yellow; } | IE9+ |
| ::placeholder | ::placeholder | Placeholder-Text auswählen | input::placeholder { color: #999; } | Moderne Browser |
| ::backdrop | ::backdrop | Hintergrund von Vollbild | dialog::backdrop { background: rgba(0,0,0,0.5); } | Moderne Browser |
📊 Advanced Selectors
| Selektor | Syntax | Beschreibung | Beispiel | Browserunterstützung |
|---|---|---|---|---|
| :root | :root | Dokumenten-Wurzel | :root { --main-color: blue; } | IE9+ |
| :scope | :scope | Scope-Element auswählen | :scope > p { margin: 0; } | Moderne Browser |
| :defined | :defined | Definierte Custom-Elemente | custom-element:defined { opacity: 1; } | Moderne Browser |
| :host | :host | Shadow Host | :host { display: block; } | Moderne Browser |
| :host(selector) | :host(sel) | Shadow Host mit Selektor | :host(.active) { color: red; } | Moderne Browser |
| :host-context(selector) | :host-context(sel) | Host in bestimmtem Kontext | :host-context(.dark) { color: white; } | Moderne Browser |
| ::slotted(selector) | ::slotted(sel) | In Shadow DOM geslotteter Inhalt | ::slotted(p) { margin: 0; } | Moderne Browser |
📊 Media Query Selectors
| Selektor | Syntax | Beschreibung | Beispiel | Browserunterstützung |
|---|---|---|---|---|
| @media | @media (condition) | Stile basierend auf Medienspezifikation | @media (max-width: 768px) { .nav { display: none; } } | IE9+ |
| @supports | @supports (property: value) | Stile bei Feature-Unterstützung | @supports (display: grid) { .layout { display: grid; } } | Moderne Browser |
| @container | @container (condition) | Stile basierend auf Containergröße | @container (min-width: 400px) { .card { flex-direction: row; } } | Moderne Browser |
Quick Examples
css
CSS Code
/* Kombination grundlegender Selektoren */
.header nav ul li a:hover {
color: #007bff;
text-decoration: none;
}
/* Attributselektoren für Formulare */
input\[type="email"]:focus:valid {
border-color: green;
box-shadow: 0 0 5px rgba(0,255,0,0.3);
}
/* Pseudo-Elemente für erweitertes Styling */
.quote::before {
content: "“";
font-size: 2em;
color: #999;
}
/* Erweiterte Strukturselektoren */
.grid-item:nth-child(3n+1) {
margin-left: 0;
}
/* Moderne logische Selektoren */
:is(h1, h2, h3):not(.no-margin) {
margin-top: 2rem;
}Best Practices und Tipps:
Verwenden Sie spezifische Selektoren, um unbeabsichtigte Stilkonflikte zu vermeiden. Bevorzugen Sie Klassenselektoren gegenüber IDs für Wiederverwendbarkeit. Kombinieren Sie Selektoren effizient, um die CSS-Dateigröße zu reduzieren. Testen Sie Pseudo-Klassen in verschiedenen Browsern. :not() kann Performance beeinflussen, daher vorsichtig einsetzen. Pseudo-Elemente erzeugen virtuelle DOM-Elemente. Beachten Sie die Spezifität bei komplexen Kombinationen. Attributselektoren eignen sich für dynamische Formulare. Testen Sie moderne Selektoren (:has(), :is()) auf Browserunterstützung. Gruppieren Sie verwandte Selektoren für bessere Organisation. Verwenden Sie Nachfahrenselektoren sparsam, um Überverschachtelung zu vermeiden. Manche Pseudo-Klassen funktionieren nur mit bestimmten Elementen.
🧠 Testen Sie Ihr Wissen
Bereit zum Start
Reference Knowledge Check
Testen Sie Ihr Wissen über CSS-Selektoren und deren Anwendung.
3
Fragen
70%
Zum Bestehen
∞
Zeit
∞
Versuche
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt