CSS Selectors: Die CSS-Selektoren sind grundlegende Werkzeuge, um HTML-Elemente auszuwählen und gezielt zu stylen. Ein CSS-Selektor identifiziert Elemente in der HTML-Struktur und wendet dann eine oder mehrere Stilregeln darauf an. Es gibt verschiedene Arten von Selektoren, die von allgemeinen bis zu sehr spezifischen Definitionen reichen.
Grundlegende CSS-Selektoren
1. Element-Selektor
Der Element-Selektor zielt auf alle Instanzen eines bestimmten HTML-Tags ab.
p {
color: blue;
}Dieses Beispiel wendet den Stil auf alle <p>-Tags auf der Seite an und färbt den Text blau.
2. ID-Selektor
Der ID-Selektor verwendet das #-Symbol, um ein einzelnes Element mit einer eindeutigen ID auszuwählen. Eine ID sollte nur einmal pro Seite verwendet werden.
#header {
background-color: lightblue;
}Dieser Code wendet die Hintergrundfarbe nur auf das Element mit der ID header an.
3. Klassen-Selektor
Der Klassen-Selektor verwendet den .-Punkt, um alle Elemente mit einer bestimmten Klasse auszuwählen. Klassen können mehrfach auf einer Seite verwendet werden.
.text-center {
text-align: center;
}Alle Elemente mit der Klasse text-center werden zentriert ausgerichtet.
4. Universalselektor
Der Universalselektor * wendet den Stil auf alle Elemente auf der Seite an.
* {
margin: 0;
padding: 0;
}Hier wird der Standardabstand (Margin) und die Innenabstände (Padding) für alle Elemente entfernt.
5. Attribut-Selektor
Der Attribut-Selektor zielt auf Elemente mit einem bestimmten Attribut oder Attributwert ab.
input[type="text"] {
border: 1px solid #000;
}Dieser Code wendet einen Rand auf alle Eingabefelder mit dem Typ text an.
Erweiterte Selektoren
1. Nachfahrenselektor
Der Nachfahrenselektor wendet den Stil auf alle Elemente an, die Nachfahren eines bestimmten Elements sind.
div p {
color: green;
}Hier werden alle <p>-Elemente innerhalb eines <div>-Elements grün eingefärbt.
2. Kindselektor
Der Kindselektor (>) wendet den Stil nur auf direkte Kinder eines Elements an.
div > p {
color: red;
}In diesem Beispiel werden nur die <p>-Tags direkt innerhalb eines <div>-Elements rot.
3. Adjacent Sibling Selektor
Der benachbarte Geschwisterselektor (+) wendet den Stil auf das erste Element nach einem bestimmten Element an.
h1 + p {
margin-top: 0;
}Hier wird das <p>-Element, das direkt nach einem <h1>-Element folgt, ohne oberen Abstand angezeigt.
4. General Sibling Selektor
Der allgemeine Geschwisterselektor (~) wendet den Stil auf alle Geschwister eines Elements an.
h1 ~ p {
color: purple;
}Dieser Stil wird auf alle <p>-Elemente angewendet, die Geschwister eines <h1>-Elements sind.
Pseudoklassen und Pseudoelemente
Pseudoklassen
Pseudoklassen spezifizieren einen besonderen Zustand eines Elements, wie zum Beispiel den Hover-Effekt.
a:hover {
color: red;
}Hier wird die Textfarbe eines Links rot, wenn er mit der Maus berührt wird.
Pseudoelemente
Pseudoelemente wie ::before und ::after erzeugen virtuelle Elemente und können genutzt werden, um zusätzlichen Inhalt einzufügen.
p::before {
content: "Hinweis: ";
font-weight: bold;
}In diesem Beispiel wird vor jedem <p>-Element “Hinweis:” angezeigt.
Häufig gestellte Fragen
Wie unterscheidet sich eine Klasse von einer ID?
Eine Klasse kann auf mehrere Elemente angewendet werden, während eine ID einzigartig sein und nur einmal pro Seite vorkommen sollte.
Kann ich mehrere Selektoren kombinieren?
Ja, Selektoren können kombiniert werden, um spezifischere Stile anzuwenden, z. B. div p.text-center für <p>-Elemente mit der Klasse text-center innerhalb eines <div>.
Wann sollte ich Pseudoklassen und Pseudoelemente verwenden?
Pseudoklassen sind ideal für Zustände wie :hover, während Pseudoelemente wie ::before und ::after für das Einfügen zusätzlichen Inhalts genutzt werden.