Selektoren#

Selektoren bieten die Möglichkeit ein oder mehrere Elemente auf der Website auszuwählen (selektieren) und diese mittels CSS zu verändern.

Verschiedene Arten von Selektoren können kombiniert werden, um nur ganz bestimmte Elemente zu selektieren. Die folgende Tabelle zeigt eine Übersicht, über die einfachen Selektoren.

Selektor	Wählt aus?
* - Universal	Alle Elemente auf der Website
Element	Wählt alle Elemente vom gleichen Typ aus.
Class (Klasse)	Wählt alle Elemente mit der gleichen Class aus.
ID	Wählt alle Elemente mit der gleichen ID aus.
Pseudoclass (Pseudoklassen)	Pseudoklassen entstehen meistens, wenn sich der Zustand des Elementes verändert - zum Beispiel befindet sich die Maus über dem Element.

Universal#

Der Universal-Selektor [*] (Stern) wählt alle Elemente auf der Website aus. Der Universal-Selektor ist mit Bedacht zu verwenden, da durch die Nutzung ungewünschte Veränderungen bei allen Elementen auf einer Website stattfinden können.

* {
  color: red;
}

Element#

Der Element-Selektor wählt alle Elemente eines bestimmten Typs aus.

<h1>Onlineshop für Marvel Filme</h1>

<p>Größte Verfügbarkeit aller Filme</p>

h1 {
  color: brown;
}

p {
  color: rebeccapurple;
}

See the Pen selektoren1 by csswebsite (@csswebsite) on CodePen.

Class#

Der Class-Selektor wählt alle Elemente mit der angegebenen Class aus. Eine Class darf einmal oder mehrmals verwendet werden. Eine Class wird immer mit dem Punkt-Symbol und dem Class-Namen ausgewählt.

Wie Klassen in HTML erstellt werden, wird auf der HTML-Seite unter Attribute erklärt.

<h2>CSS</h2>

<p class="info">CSS besteht aus Selektoren und Deklarationen</p>

<p>Ohne Selektoren funktioniert es nicht.</p>

<p class="info">Ohne CSS gäbe es keine designten Websites.</p>

.info {
  color: green;
}

See the Pen Selektoren2 by csswebsite (@csswebsite) on CodePen.

ID#

Der ID-Selektor wählt das Element mit der angegebenen ID aus. Eine ID darf nur einmal verwendet werden und dient zur eindeutigen Identifizierung eines Elemente. Eine ID wird immer mit dem Rauten-Symbol [#] und dem ID-Namen ausgewählt.

<form action="/daten.php" method="post">
  <input type="text" name="email-name" id="email-name" placeholder="Name">
</form>

#email-name {
  color: red;
}

See the Pen Selektoren3 by csswebsite (@csswebsite) on CodePen.

Wichtig

Eine ID sollte immer nur einmal verwendet werden. Klassen dürfen mehrmals verwendet werden. Verwenden Sie Klassen wann immer möglich.

Pseudoklassen#

Pseudoklassen verändern ein Element, wenn es einen bestimmten Zustand besitzt. Wenn der Mauszeiger sich zum Beispiel über einen Text oder Bild befindet, hat dieses Element die Eigenschaft hover und dass Element kann mittels CSS verändert werden.

p {
  color: red;
}

p:hover {
  color: blue;
}

See the Pen Selektoren4 by csswebsite (@csswebsite) on CodePen.

Selektoren kombinieren#

Alle Selektoren können miteinander kombiniert werden, um präziser Elemente auf der Website zu selektieren.

<ul class="nav">
  <li><a href="">Linktext 1</a></li>
  <li><a class="active" href="">Linktext 2</a></li>
  <li><a href="">Linktext 3</a></li>
</ul>

<div class="container">
  <p>Dieser Text hat einen <a href="#">Link</a></p>
</div>

a {
color: #333;
}

ul.nav .active {
  color: darkkhaki;
  font-size: 25px;
}

.container p a {
  color: red;
  font-size: 30px;
}

Hinweis

Jedes Element, dass die Class active besitzt, dass sich innerhalb einer ul mit der Class nav befindet.

Hinweis

Jedes a, innerhalb eines p und dieses p befindet sich ein einem Element mit der Class container

See the Pen Selektoren5 by csswebsite (@csswebsite) on CodePen.