Ein CSS-Selektor wählt die von Ihnen gewünschten HTML-Elemente aus stylen möchte.
CSS-Selektoren werden verwendet, um die von Ihnen verwendeten HTML-Elemente zu „finden“ (oder auszuwählen). stylen möchte.
Wir können CSS-Selektoren in fünf Kategorien einteilen:
Einfache Selektoren (Elemente basierend auf Name, ID, Klasse auswählen)
Kombinator-Selektoren (auswählen Elemente basierend auf einer spezifischen Beziehung zwischen ihnen)
Pseudoklassenselektoren (wählen Sie Elemente basierend auf einem bestimmten Zustand aus)
Pseudoelement-Selektoren (select und einen Teil eines Elements formatieren)
Attributselektoren (wählen Sie Elemente basierend auf aus ein Attribut oder ein Attributwert)
Auf dieser Seite werden die grundlegendsten CSS-Selektoren erläutert.
Der Elementselektor wählt HTML-Elemente basierend auf dem Elementnamen aus.
Hier werden alle <p>-Elemente auf der Seite angezeigt zentriert, mit roter Textfarbe:
p
{
text-align: center;
color: red;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
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, ebenso der ID-Selektor gewöhnt an Wählen Sie ein einzigartiges Element aus!
Um ein Element mit einer bestimmten ID auszuwählen, schreiben Sie ein Rautezeichen (#), gefolgt von die ID des Elements.
Die folgende CSS-Regel wird auf das HTML-Element mit id="para1" angewendet:
#para1
{
text-align: center;
color: red;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Hinweis: Ein ID-Name darf nicht mit einer Zahl beginnen!
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 Klassenname.
In diesem Beispiel werden alle HTML-Elemente mit class="center" rot und zentriert angezeigt:
.center {
text-align: center;
color: red;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Sie können auch festlegen, dass nur bestimmte HTML-Elemente von einer Klasse betroffen sein sollen.
In diesem Beispiel werden nur <p>-Elemente mit class="center" verwendet rot und mittig ausgerichtet:
p.center {
text-align: center;
color: red;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
HTML-Elemente kann sich auch auf mehr als eine Klasse beziehen.
In diesem Beispiel wird das <p>-Element gemäß class="center" gestaltet. und zu class="large":
<p class="center large">This paragraph refers to two classes.</p>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Hinweis: Ein Klassenname darf nicht mit einer Zahl beginnen!
Der universelle Selektor (*) wählt das gesamte HTML aus Elemente auf der Seite.
Die folgende CSS-Regel wirkt sich auf jedes HTML-Element auf der Seite aus:
*
{
text-align: center;
color: blue;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Der Gruppierungsselektor wählt alle HTML-Elemente mit demselben Stil aus Definitionen.
Schauen Sie sich den folgenden CSS-Code an (die Elemente h1, h2 und p haben dasselbe 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 die einzelnen Selektoren durch ein Komma.
In diesem Beispiel haben wir die Selektoren aus dem obigen Code gruppiert:
h1, h2, p
{
text-align: center;
color: red;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Selektor:
#id
Beispiel:
#firstname
Beispielbeschreibung: Wählt das Element mit der ID="Vorname" aus.
Selektor:
.class
Beispiel:
.intro
Beispielbeschreibung: Wählt alle Elemente mit class="intro" aus
Selektor:
element.class
Beispiel:
p.intro
Beispielbeschreibung: Wählt nur <p> Elemente mit class="intro" aus
Selektor:
*
Beispiel:
*
Beispielbeschreibung: Wählt alle Elemente aus
Selektor:
element
Beispiel:
p
Beispielbeschreibung: Wählt alle <p>-Elemente aus
Selektor:
element,element,..
Beispiel:
div, p
Beispielbeschreibung: Wählt alle <div>-Elemente und alle <p>-Elemente aus