CSS-Selektoren


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Ein CSS-Selektor wählt die von Ihnen gewünschten HTML-Elemente aus stylen möchte.


CSS-Selektoren

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 CSS-Elementselektor

Der Elementselektor wählt HTML-Elemente basierend auf dem Elementnamen aus.

Beispiel

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 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, 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.

Beispiel

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 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 Klassenname.

Beispiel

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.

Beispiel

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.

Beispiel

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 CSS Universal Selector

Der universelle Selektor (*) wählt das gesamte HTML aus Elemente auf der Seite.

Beispiel

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 CSS-Gruppierungsselektor

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.

Beispiel

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>




Alle einfachen CSS-Selektoren

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