CSS - Pseudo-Klassen

Was ist eine Pseudo-Klasse?

Hallo zusammen, zukünftige CSS-Zauberer! Heute tauchen wir in die magische Welt der CSS-Pseudo-Klassen ein. Lassen Sie sich nicht vom schicken Namen abschrecken – ich verspreche, es ist nicht so kompliziert, wie es sich anhört. Tatsächlich werden Sie, wenn Sie einmal den Dreh heraus haben, Pseudo-Klassen wie ein Profi in null Komma nichts verwenden!

Also, was genau ist eine Pseudo-Klasse? Stellen Sie sich vor, Sie haben eine Superkraft, die es Ihnen ermöglicht, Elemente auf Ihrer Webseite basierend auf ihrem Zustand oder ihrer Bedingung zu stylen. Das ist im Wesentlichen, was Pseudo-Klassen tun! Sie erlauben es Ihnen, Styles auf Elemente anzuwenden, basierend auf Dingen wie ob der Benutzer darüber hover, ob sie das erste Kind in einer Liste sind oder sogar in welcher Sprache die Seite ist.

Syntax

Bevor wir uns spezifische Pseudo-Klassen ansehen, werfen wir einen kurzen Blick auf die Syntax. Es ist actually quite einfach:

auswahl:pseudo-klasse {
eigenschaft: wert;
}

Sehen Sie das Colon (:) nach dem Auswahler, das ist, wie Sie wissen, dass Sie es mit einer Pseudo-Klasse zu tun haben. Easy peasy, oder?

Pseudo-Klasse Hover

Lassen Sie mit einer der häufigsten und unterhaltsamsten Pseudo-Klassen beginnen: :hover. Diese kleine Perle ermöglicht es Ihnen, den Style eines Elements zu ändern, wenn der Benutzer mit der Maus darüber schwebt. Es ist wie Magie!

<button class="meine-schaltflaeche">Schweben Sie über mir!</button>

.meine-schaltflaeche {
hinweisfarbe: blau;
farbe: weiss;
polsterung: 10px 20px;
rand: none;
cursor: zeiger;
}

.meine-schaltflaeche:hover {
hinweisfarbe: hellblau;
farbe: schwarz;
}

In diesem Beispiel startet unsere Schaltfläche mit blauem Hintergrund und weißem Text. Aber wenn Sie darüber schweben – poof! – sie ändert sich zu hellblauem Hintergrund mit schwarzer Schrift. Probieren Sie es aus und sehen Sie die Magie geschehen!

Pseudo-Klasse Active

Als nächstes ist die :active Pseudo-Klasse dran. Diese wird ausgelöst, wenn ein Element vom Benutzer aktiviert wird, wie zum Beispiel, wenn sie auf eine Schaltfläche klicken.

<button class="meine-schaltflaeche">Klicke mich!</button>

.meine-schaltflaeche {
hinweisfarbe: blau;
farbe: weiss;
polsterung: 10px 20px;
rand: none;
cursor: zeiger;
}

.meine-schaltflaeche:active {
hinweisfarbe: dunkelblau;
transform: skala(0.95);
}

Jetzt, wenn Sie die Schaltfläche gedrückt halten, wird sie dunkelblau und leicht verkleinert. Es ist, als würde die Schaltfläche sagen: "Hey, ich werde geklickt!"

Pseudo-Klasse Focus

Die :focus Pseudo-Klasse ist besonders nützlich, um die Zugänglichkeit zu verbessern. Sie wird angewendet, wenn ein Element den Fokus erhält, was passieren kann, wenn ein Benutzer in ein Eingabefeld klickt oder zu ihm wechselt.

<input type="text" class="meine-eingabe" placeholder="Etwas eingeben...">

.meine-eingabe {
rand: 2px solid #ccc;
polsterung: 5px;
}

.meine-eingabe:focus {
rand-farbe: blau;
umrandung: none;
schatten: 0 0 5px rgba(0, 0, 255, 0.5);
}

Mit diesem CSS, wenn das Eingabefeld fokussiert ist, bekommt es einen blauen Rand und einen subtilen blauen Schimmer. Es ist eine großartige Möglichkeit, Ihre Benutzer durch Formulare zu führen!

Pseudo-Klasse nth Child

Nun werden wir mit der :nth-child() Pseudo-Klasse etwas eleganter. Diese ermöglicht es Ihnen, Elemente basierend auf ihrer Position in einer Gruppe von Geschwistern auszuwählen.

<ul class="meine-liste">
<li>Erstes Element</li>
<li>Zweites Element</li>
<li>Drittes Element</li>
<li>Viertes Element</li>
<li>Fünftes Element</li>
</ul>

.meine-liste li:nth-child(ungerade) {
hinweisfarbe: #f2f2f2;
}

.meine-liste li:nth-child(3n) {
farbe: blau;
}

In diesem Beispiel stylen wir jedes ungerade nummerierte Listenelement mit einem hellgrauen Hintergrund und jedes dritte Element mit blauem Text. Es ist, als ob Sie ein Muster in Ihrer Liste erstellen!

Pseudo-Klasse First-Child

Die :first-child Pseudo-Klasse wählt das erste Element unter einer Gruppe von Geschwisterelementen aus. Es ist großartig, um dem ersten Element in einer Liste oder dem ersten Absatz in einem Artikel eine besondere Behandlung zu geben.

<div class="container">
<p$I'm the first paragraph!</p>
<p$I'm just a regular paragraph.</p>
<p$I'm too!</p>
</div>

.container p:first-child {
gewicht: fett;
farbe: blau;
}

Jetzt hebt sich der erste Absatz von den anderen ab. Es ist, als ob man dem ersten Element eine VIP-Karte gibt!

Pseudo-Klasse Last-Child

Wie Sie vielleicht erraten können, ist :last-child das Gegenteil von :first-child. Es wählt das letzte Element unter einer Gruppe von Geschwistern aus.

<ul class="meine-liste">
<li>Erstes Element</li>
<li>Zweites Element</li>
<li>Drittes Element</li>
<li>Letztes Element!</li>
</ul>

.meine-liste li:last-child {
schriftart: kursiv;
farbe: grün;
}

Mit diesem CSS bekommt dasletzte Element in der Liste eine besondere grüne, kursive Behandlung. Es ist eine großartige Möglichkeit, Dinge abzuschließen!

Pseudo-Klasse Lang

Die :lang Pseudo-Klasse ist etwas spezialisierter. Sie ermöglicht es Ihnen, Elemente basierend auf der Sprache des Dokuments oder Elements auszuwählen.

<p lang="en">Hello, World!</p>
<p lang="fr">Bonjour, le Monde!</p>
<p lang="es">¡Hola, Mundo!</p>

p:lang(en) {
farbe: blau;
}

p:lang(fr) {
farbe: rot;
}

p:lang(es) {
farbe: grün;
}

Dieses CSS wird jede Begrüßung basierend auf ihrer Sprache einfärben. Es ist, als ob Sie einen mehrsprachigen Farbcodes für Ihre Webseite erstellen!

Pseudo-Klasse Not

Zuletzt werfen wir einen Blick auf die :not() Pseudo-Klasse. Diese ist etwas anders – sie wählt Elemente aus, die NICHT dem Selector entsprechen, den Sie angeben.

<div class="container">
<p$I'm a paragraph.</p>
<p class="special">I'm a special paragraph!</p>
<p$I'm another paragraph.</p>
</div>

.container p:not(.special) {
farbe: grau;
}

In diesem Fall werden alle Absätze außer dem mit der "special" Klasse grau eingefärbt. Es ist, als ob man sagt: "Stilisiere alles außer diesem einen Ding!"

Liste der CSS Pseudo-Klassen

Es gibt viele weitere Pseudo-Klassen in CSS. Hier ist eine Tabelle einige der häufigeren:

Pseudo-Klasse	Beschreibung
:hover	Wählt ein Element aus, wenn die Maus darüber schwebt
:active	Wählt ein Element aus, wenn es aktiviert wird
:focus	Wählt ein Element aus, wenn es den Fokus hat
:nth-child()	Wählt Elemente basierend auf ihrer Position in einer Gruppe von Geschwistern aus
:first-child	Wählt das erste Kind-Element aus
:last-child	Wählt dasletzte Kind-Element aus
:lang()	Wählt Elemente basierend auf der Sprache aus
:not()	Wählt Elemente aus, die nicht einem Selector entsprechen
:link	Wählt unbesuchte Links aus
:visited	Wählt besuchte Links aus
:checked	Wählt markierte Eingabeelemente aus
:disabled	Wählt deaktivierte Elemente aus
:empty	Wählt Elemente aus, die keine Kinder haben

Und das war's, Leute! Wir haben die Welt der CSS-Pseudo-Klassen durchquert, von den Grundlagen bis zu einige fortgeschritteneren Techniken. Denken Sie daran, der Schlüssel zum Meister zu werden, ist die Übung. Also machen Sie sich hingesetzt und experimentieren Sie mit diesen Pseudo-Klassen in Ihren eigenen Projekten. Vor Ihnen liegt es, dynamische, interaktive Websites zu erstellen, die auf alle möglichen coolen Weisen auf Benutzeraktionen reagieren. Viel Spaß beim Coden!

Credits: Image by storyset