Einführung
CSS-Selektoren sind mächtige Werkzeuge, die es ermöglichen, spezifische HTML-Elemente auszuwählen und ihnen Styling zuzuweisen. Dieser umfassende Leitfaden wird Sie durch die verschiedenen Arten von Selektoren führen und Ihnen helfen, präzise und effektive Styling-Regeln für Ihre Webseiten zu erstellen.
Grundlagen der Selektoren
1. Universal Selector (Universal-Selektor)
Der Universal Selector (*) wählt alle Elemente auf der Seite aus.
* { margin: 0; padding: 0; }2. Type Selector (Typ-Selektor)
Wählt alle Instanzen eines bestimmten HTML-Tags aus.
p { font-size: 16px; }3. Class Selector (Klassen-Selektor)
Selektiert Elemente mit einer bestimmten Klasse.
.button { background-color: #3498db; }4. ID Selector (ID-Selektor)
Wählt ein einziges Element mit einer bestimmten ID aus.
#header { font-size: 24px; }5. Attribute Selector (Attribut-Selektor)
Selektiert Elemente basierend auf ihren Attributen.
input[type="text"] { border: 1px solid #ccc; }6. Descendant Selector (Nachfahren-Selektor)
Selektiert ein Element, das ein Nachfahre eines anderen Elements ist.
article p { color: #555; }7. Child Selector (Kind-Selektor)
Selektiert ein direktes Kind eines Elements.
ul > li { list-style-type: square; }8. Adjacent Sibling Selector (Geschwister-Selektor)
Selektiert ein Element, das ein direkter Geschwisterteil eines anderen Elements ist.
h2 + p { font-style: italic; }Kombinierte Selektoren
1. Grouping Selectors (Gruppierung von Selektoren)
Gruppiert mehrere Selektoren, um denselben Stil anzuwenden.
h1, h2, h3 { color: #333; }2. Multiple Classes Selector (Mehrere Klassen-Selektor)
Selektiert Elemente, die mehrere Klassen haben.
.button.primary { background-color: #3498db; }3. Descendant Combinator (Nachfahren-Kombinator)
Wählt alle Nachfahren eines Elements aus.
section p { line-height: 1.5; }4. Child Combinator (Kind-Kombinator)
Selektiert alle direkten Kinder eines Elements.
ul > li { font-weight: bold; }Erweiterte Selektoren
1. :hover Pseudo-class (:hover Pseudo-Klasse)
Ändert das Styling, wenn das Element mit der Maus überfahren wird.
a:hover { text-decoration: underline; }2. :nth-child Pseudo-class (:nth-child Pseudo-Klasse)
Selektiert ein Element basierend auf seiner Position unter den Kindern seines Elternelements.
li:nth-child(even) { background-color: #f2f2f2; }3. :not Pseudo-class (:not Pseudo-Klasse)
Selektiert ein Element, das nicht den angegebenen Selektoren entspricht.
input:not([type="submit"]) { border: 1px solid #ccc; }4. :before and :after Pseudo-elements (:before und :after Pseudo-Elemente)
Fügt Inhalte vor oder nach dem Inhalt eines Elements hinzu.
p:before { content: "🔍 "; }FAQ (Häufig gestellte Fragen)
Kann ich mehrere Selektoren in einer Regel kombinieren?
Ja, durch das Trennen der Selektoren mit einem Komma können Sie denselben Stil auf mehrere Elemente anwenden.
h1, h2, h3 { color: #333; }
Wie wähle ich Elemente aus, die mehrere Klassen haben?
Sie können mehrere Klassen in einem Selektor kombinieren, indem Sie die Klassennamen ohne Leerzeichen verknüpfen.
.button.primary { background-color: #3498db; }
Was ist der Unterschied zwischen :nth-child und :nth-of-type?
:nth-child wählt Elemente basierend auf ihrer Position unter den Kindern ihres Elternelements aus, während :nth-of-type nur Elemente desselben Typs berücksichtigt.
li:nth-child(odd) { color: red; } p:nth-of-type(even) { font-style: italic; }
