Designer-Logo
Designer-Logo
Überschrift CSS Pseudo-Class

CSS-Selektoren

CSS-Selektoren werden verwendet um HTML-Elemente zu "finden" (oder wählen) die gestylt werden. Man kann CSS Selektoren in 5 Kategorien unterteilen:
Einfache Selektoren(Elemente basierend auf Name, ID, Klasse auswählen)
Kombinatoren(Elemente basierend auf einer bestimmten Beziehung zwischen ihnen auswählen)

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.

Was sind Pseudo-Klassen?

Ein Pseudo-Klasse definiert einen speziellen Status eines Elementes. Zum Beispiel kann es verwendet werden für: Style eines Elementes wenn der "User" mit der Maus darüberfährt. Style von unbesuchten und besuchten Links sind unterschiedlich. Style eines Elementes bei focus(wenn du mit der der Tabulatoren-Taste von Link zu Link springst).

Syntax:

Der Syntax von Pseudo-Klassen:
selector:pseudo-class {property: value;}
Überschrift Anker Pseudo-Class Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
/* unbesuchter Link */
a:link {
color: red;
}
/* besuchter Link */
a:visited {
color: green;
}
/* Maus über Link */
a:hover {
color: hotpink;
}
/* gewählter Link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>CSS Links</h2>
<p><b><a href="index.htm" target="_blank">Das ist ein Link</a></b></p>
<p><b>Bemerke:</b> a:hover kommt nach a:link und a:visited in der CSS-Reihenfolge um zu funktionieren.</p>
<p><b>Bemerke:</b> a:active kommt nach a:hover in der CSS-Reihenfolge um zu funktionieren.</p>
</body>
</html>
Überschrift hover über Main-Bereich
Das Beispiel verwendet das :hover Pseudo-Klasse an einem <main> Element:
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
main {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
main:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>Maus über main wird wechseln die Hintergrundfarbe:</p>
<main>Maus über mich !!!</main>
</body>
</html>
Überschrift Pseudo-Klassen und CSS-Klassen
Pseudo-Klassen können kombiniert werden mit CSS-Klassen:
Wenn du hoverst über den Link im Beispiel, er wird die Farbe wechseln:
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
}
</style>
</head>
<body>
<h2>Pseudo-Klassen und CSS-Klassen</h2>
<p>Wenn du hoverst über den ersten Link, wird er die Farbe wechseln:</p>
<p><a class="highlight" href="index.htm">Startseite strassencoder.ch</a></p>
<p><a href="CSS-Selektor.htm">CSS Tutorial über Selektoren</a></p>
</body>
</html>
Überschrift einfacher Tooltip mit hover hervorrufen
Wenn du hoverst über das <main> Element wird das <p> Element (wie ein tooltip) angezeigt:
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}
main:hover p {
display: block;
}
</style>
</head>
<body>
<main>Hoverst du über <main> wird es dir das p-Element zeigen.
<p>Hier bin ich!</p>
</main>
</body>
</html>
Überschrift Pseudo-Klasse first-child
Das CSS Pseudo-Klasse :first-child repräsentiert das erste Element unter einer Gruppe von Geschwister-Elementen.
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<div>
<p>Hier ist einiger Text.</p>
<p>Hier ist einiger Text.</p>
</div>
</body>
</html>
Überschrift Pseudo-Klasse first-child
Das CSS Pseudo-Klasse :first-child repräsentiert das erste Element unter einer Gruppe von Geschwister-Elementen.
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>Ich bin eine <i>starke</i> Person. Ich bin eine <i>starke</i> Person.</p>
<p>Ich bin eine <i>starke</i> Person. Ich bin eine <i>starke</i> Person.</p>
</body>
</html>
Überschrift Pseudo-Klasse first-child
Im unten gezeigten Beispiel befindet sich das <i> Element innerhalb des <p> Elementes und ist das erste Kinds-Element von <p>.
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>
<body>
<div>
<p>Ich bin eine <i>starke</i> Person. Ich bin eine <i>starke</i> Person.</p>
<p>Ich bin eine <i>starke</i> Person. Ich bin eine <i>starke</i> Person.</p>
</div>
</body>
</html>
Designer-Logo