CSS -Selektoren
Ein CSS-Selektor wählt die HTML-Elemente aus, die Sie formatieren möchten.
CSS-Selektoren
CSS-Selektoren werden verwendet, um die HTML-Elemente zu „finden“ (oder auszuwählen), die Sie formatieren möchten.
Wir können CSS-Selektoren in fünf Kategorien einteilen:
- Einfache Selektoren (Elemente basierend auf Name, ID, Klasse auswählen)
- Combinator-Selektoren (wählen Sie Elemente basierend auf einer bestimmten Beziehung zwischen ihnen aus)
- Pseudoklassenselektoren (Elemente basierend auf einem bestimmten Zustand auswählen)
- Pseudoelement-Selektoren (einen Teil eines Elements auswählen und formatieren)
- Attributselektoren (Elemente basierend auf einem Attribut oder Attributwert auswählen)
Auf dieser Seite werden die grundlegendsten CSS-Selektoren erläutert.
Der CSS-Elementselektor
Der Elementselektor wählt HTML-Elemente basierend auf dem Elementnamen aus.
Beispiel
Hier werden alle <p>-Elemente auf der Seite zentriert ausgerichtet und haben eine rote Textfarbe:
p {
text-align: center;
color: red;
}
Try it Yourself »
Der CSS-ID-Selektor
Der ID-Selektor verwendet das ID-Attribut eines HTML-Elements, um ein bestimmtes Element auszuwählen.
Die ID eines Elements ist innerhalb einer Seite eindeutig, daher wird der ID-Selektor verwendet, um ein eindeutiges Element auszuwählen!
Um ein Element mit einer bestimmten ID auszuwählen, schreiben Sie ein Hash-Zeichen (#), gefolgt von der ID des Elements.
Beispiel
Die folgende CSS-Regel wird auf das HTML-Element angewendet id="para1":
#para1 {
text-align: center;
color: red;
}
Try it Yourself »
Hinweis: Ein ID-Name darf nicht mit einer Zahl beginnen!
Der CSS-Klassenselektor
Der Klassenselektor wählt HTML-Elemente mit einem bestimmten Klassenattribut aus.
Um Elemente mit einer bestimmten Klasse auszuwählen, schreiben Sie einen Punkt (.) gefolgt vom Klassennamen.
Beispiel
In diesem Beispiel werden alle HTML-Elemente mit class="center" rot und zentriert angezeigt:
.center {
text-align: center;
color: red;
}
Try it Yourself »
Sie können auch festlegen, dass nur bestimmte HTML-Elemente von einer Klasse betroffen sein sollen.
Beispiel
In diesem Beispiel werden nur <p>-Elemente mit class="center" rot und zentriert ausgerichtet:
p.center {
text-align: center;
color: red;
}
Try it Yourself »
HTML-Elemente können auch auf mehr als eine Klasse verweisen.
Beispiel
In diesem Beispiel wird das <p> -Element gemäß class="center" und class="large" gestaltet:
<p class="center large">Dieser Absatz bezieht sich auf zwei Klassen.</p>
Try it Yourself »
Hinweis: Ein Klassenname darf nicht mit einer Zahl beginnen!
Der CSS Universal Selector
Der universelle Selektor (*) wählt alle HTML-Elemente auf der Seite aus.
Beispiel
Die folgende CSS-Regel wirkt sich auf jedes HTML-Element auf der Seite aus:
* {
text-align: center;
color: blue;
}
Try it Yourself »
Der CSS-Gruppierungsselektor
Der Gruppierungsselektor wählt alle HTML-Elemente mit denselben Stildefinitionen aus.
Sehen Sie sich den folgenden CSS-Code an (die Elemente h1, h2 und p haben die gleichen Stildefinitionen):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Es ist besser, die Selektoren zu gruppieren, um den Code zu minimieren.
Um Selektoren zu gruppieren, trennen Sie jeden Selektor durch ein Komma.
Beispiel
In diesem Beispiel haben wir die Selektoren aus dem obigen Code gruppiert:
h1, h2, p {
text-align: center;
color: red;
}
Try it Yourself »
Alle einfachen CSS-Selektoren
| Selector | Beispiel | Beispielbeschreibung |
|---|---|---|
| #id | #firstname | Wählen Sie das Element mit aus id="firstname" |
| .class | .intro | Wählt alle Elemente mit aus class="intro" |
| element.class | p.intro | Wählen Sie nur <p> Elemente mit aus class="intro" |
| * | * | Wählt alle Elemente aus |
| element | p | Wählt alle <p>-Elemente aus |
| element,element,.. | div, p | Wählt alle <div>-Elemente und alle <p>-Elemente aus |
CSS — Einfache Selektoren – W3Schools-Video
Video über einfache Selektoren wie ein Element, eine ID und eine Klasse in CSS.
Teil einer Reihe von Video-Tutorials zum Erlernen von CSS für Anfänger!
