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 (wählen Sie Elemente basierend auf Name, ID, Klasse aus)
- Kombinator-Selektoren (Wählen Sie Elemente basierend auf einer bestimmten Beziehung zwischen ihnen aus)
- Pseudo-Klassen-Selektoren (wählen Elemente basierend auf einem bestimmten Zustand aus)
- Pseudo-Element-Selektoren (wählen und formatieren Sie einen Teil eines Elements)
- Attributselektoren (Elemente basierend auf einem Attribut oder Attributwert auswählen)
Diese Seite erklärt die grundlegendsten CSS-Selektoren.
Das CSS-Element Selektor
Der Elementselektor wählt HTML-Elemente basierend auf dem Elementnamen aus.
Beispiel
Hier werden alle <p>-Elemente auf der Seite zentriert ausgerichtet, mit einer roten Textfarbe:
p
{
text-align: center;
color: red;
}
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 Rautezeichen (#), gefolgt von der ID des Elements.
Beispiel
Die folgende CSS-Regel wird auf das HTML-Element mit id="para1" angewendet:
#para1
{
text-align: center;
color: red;
}
Hinweis: Ein ID-Name darf nicht mit einer Zahl beginnen!
Die CSS-Klasse Selector
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 ausgerichtet:
.center {
text-align: center;
color: red;
}
Sie können auch angeben, dass nur bestimmte HTML-Elemente von einer Klasse betroffen sein sollen.
Beispiel
In diesem Beispiel sind nur <p>-Elemente mit class="center" rot und zentriert:
p.center {
text-align: center;
color: red;
}
HTML-Elemente können auch auf mehr als eine Klasse verweisen.
Beispiel
In diesem Beispiel wird das Element <p> entsprechend class="center" und class="large" gestaltet:
<p class="center large">This paragraph refers to two classes.</p>
Hinweis: Ein Klassenname darf nicht mit einer Zahl beginnen!
Der CSS-Universalselektor
Der Universalselektor (*) selektiert alle HTML-Elemente auf der Seite.
Beispiel
Die folgende CSS-Regel wirkt sich auf jedes HTML-Element auf der Seite aus:
*
{
text-align: center;
color: blue;
}
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 dieselben 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;
}
Alle einfachen CSS-Selektoren
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |