Pseudoklassen in CSS | Erklärt

Styling HTML -Elemente auf der Grundlage des Staates, in dem sie sich befinden, kann eine interessante Aufgabe sein, die das Gesamtsehen und die Benutzererfahrung einer Website verbessern kann. CSS bietet bestimmte Klassen für diese Aufgabe, die als Pseudoklasse bezeichnet werden. Dieser Beitrag soll Licht auf Pseudoklassen und deren Verwendung werfen. Bevor wir zu unserem Hauptthema springen.

1. Was sind Pseudoklassen?
2. : Linkklasse
3. : besuchte Klasse
4. : Hover -Klasse
5. : aktive Klasse
6. : Fokusklasse
7. : Erstkindklasse
8. : Lang -Klasse

Lass uns anfangen.

Was sind Pseudoklassen?

Pseudoklassen in CSS beschreiben einen einzigartigen Zustand eines HTML.

Syntax

Selektor: Pseudoklasse

Eigentumswert;

Es gibt verschiedene Pseudoklassen in CSS. Wir werden jedoch einige wichtige in dieser Beschreibung diskutieren.

: Linkklasse

Diese Klasse wird verwendet, um einen Link zu stylen, der noch nicht besucht wird.

Beispiel

Angenommen, Sie möchten einen Link zu Ihrer Website hinzufügen und ihm einen bestimmten Stil geben, wenn er noch nicht vom Benutzer besucht wird. Folgen Sie dem folgenden Code.

Linux -Hinweis

Im obigen Code haben wir einen Link zum HREF.

Ausgang

Der Link wurde mit der: Link -Klasse erfolgreich gestaltet.

: besuchte Klasse

Diese Klasse wird verwendet, um einen Link zu stylen, den der Benutzer besucht hat.

Beispiel

Das folgende Beispiel zeigt die Arbeit der: Besuchten Klasse folgen dem folgenden Beispiel.

Linux -Hinweis

Hier zuweisen wir den besuchten Zustand des Links die Farbe Grün grün. Dies bedeutet, dass sich die Farbe beim Öffnen des Links zu Grün ändert.

Ausgang

Bevor Sie den Link besuchen.

Wenn Sie den Link besuchen.

Der besuchte Zustand des Links wurde mit der besuchten Klasse gestaltet.

: Hover -Klasse

Diese Klasse wird verwendet, um ein Element zu stylen, wenn ein Mauszeiger darüber gebracht wird.

Beispiel

Angenommen, Sie möchten jedes Mal ein Element hervorheben, wenn der Benutzer die Maus über dieses bestimmte Element bringt.

Bring Maus über mich

Im obigen Code haben wir eine erstellt

Element und verwendete die: Hover -Klasse, um ihm eine gelbe Farbe zu verleihen. Jedes Mal, wenn Sie Ihre Maus auf das Element bringen, wechselt die Farbe in Gelb.

Ausgang

Die: Hover -Klasse funktioniert ordnungsgemäß.

: aktive Klasse

Diese Klasse wird verwendet, um ein Element zu stylen, wenn es aktiv ist.

Beispiel

Angenommen, Sie möchten, dass ein Link seine Farbe ändert, wenn er geklickt wird.

Linux -Hinweis

Wenn der Benutzer nun auf den Link klickt, ändert sich in diesem Moment die Farbe des Links in Pink.

Ausgang

Bevor Sie auf den Link klicken.

Wenn der Link geklickt wird.

Der aktive Zustand des Links wurde erfolgreich gestaltet.

: Fokusklasse

Diese Klasse wird verwendet, um ein Element zu stylen, wenn sie im Fokus steht.

Beispiel

Stylen wir ein Eingabefeld, indem Sie seine Hintergrundfarbe ändern, wenn sich ein Benutzer darauf konzentriert, indem Sie darauf klicken.

Gib deinen Namen ein:

Gemäß dem obigen Code ändert sich ein Benutzer, wenn ein Benutzer auf das Eingabefeld klickt, seine Hintergrundfarbe in Pink.

Ausgang

Die Hintergrundfarbe des Eingangsfeldes änderte sich erfolgreich.

: Erstkindklasse

Diese Klasse wird verwendet, um das erste Kind eines bestimmten Elements zu stylen.

Beispiel

Angenommen, Sie möchten CSS -Eigentum nur auf das erste Kind eines DIV -Elements anwenden. Verwenden Sie den folgenden Code.

Dieser Absatz ist das erste Kind der Div

Dieser Absatz ist das zweite Kind der Div

Im obigen Code verwenden wir die: Erste-Kind-Klasse, um den Text des

Element, das das erste Kind des Elements ist.

Ausgang

Der erste

Das Element wurde mit der: Erstkind-Klasse nach rechts ausgerichtet.

: Lang -Klasse

Diese Klasse wird verwendet, um eine Sprache anzugeben, die in einem bestimmten Element verwendet werden soll. Diese Klasse ist nützlich, wenn sie Regeln für mehrere Sprachen in einem Dokument angeben.

Beispiel

Im folgenden Beispiel geben wir einige Regeln für an

Element mit Attribut Lang = "en". Diese Regeln werden auf jeden angewendet

Element mit diesem Attribut.

Dies ist der erste Absatz.

Dies ist der zweite Absatz.

Dies ist der dritte Absatz.

Ausgang

Wie Sie sehen können, dass der erste und der dritte

Element

Elemente.

Abschluss

Pseudoklassen beschreiben einen einzigartigen Zustand eines HTML. Es gibt viele Pseudoklassen in CSS. Einige der bedeutenden sind jedoch: Linkklasse,: besuchte Klasse ,: Hover-Klasse ,: aktive Klasse,: Fokusklasse,: Erste Kindklasse und: Lang-Klasse. Diese Klassen werden in diesem Beitrag zusammen mit ihren relevanten Beispielen ausführlich erklärt.