Was sind Pseudoklassen und Pseudoelemente in CSS?

Pseudoklassen in CSS sind Selektoren, mit denen Elemente ausgewählt werden, die sich in einem bestimmten Zustand befinden, die normalerweise unsichtbar sind oder nicht durch eine Klasse oder ID des HTML-Elements selbst repräsentiert werden. Pseudoelemente in CSS ähneln eher untergeordneten Elementen eines Elements, sind jedoch nicht wirklich Teil des echten DOM-Baums. Pseudoelemente ermöglichen die Anwendung von Stilen auf bestimmte Teile eines Elements, ohne zusätzliches HTML-Markup hinzuzufügen. Pseudoklassen und Pseudoelemente bieten eine flexible Möglichkeit, bestimmte Elemente oder Elementzustände auszuwählen und zu formatieren, und sie sind sehr nützliche Werkzeuge in CSS.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

In CSS sind Pseudoklassen und Pseudoelemente spezielle CSS-Selektoren, mit denen bestimmte Elemente oder Elementzustände ausgewählt und gestaltet werden können.

1. Pseudoklasse ist ein Selektor, der zum Auswählen von Elementen in einem bestimmten Zustand verwendet wird. Diese Zustände sind normalerweise unsichtbar oder werden nicht durch eine Klasse oder ID des HTML-Elements selbst dargestellt. Beispielsweise kann die Pseudoklasse :hover verwendet werden, um das Element auszuwählen, über dem sich der Mauszeiger befindet.

a:hover {  
    color: red;  
}

Wenn in diesem Beispiel die Maus über den Link ( Element) bewegt wird, ändert sich die Farbe des Links in Rot.

Neben :hover gibt es viele weitere Pseudoklassen, wie zum Beispiel :active (vom Benutzer aktivierte Elemente auswählen), :visited (vom Benutzer besuchte Links auswählen) usw.

2. Pseudoelemente ähneln eher untergeordneten Elementen von Elementen, sind aber tatsächlich nicht Teil des echten DOM-Baums. Pseudoelemente ermöglichen es Ihnen, Stile auf bestimmte Teile eines Elements anzuwenden, ohne zusätzliches HTML-Markup hinzuzufügen. Beispielsweise können die Pseudoelemente :before und :after verwendet werden, um Inhalte oder Stile vor und nach dem Inhalt eines Elements einzufügen.

p:before {  
    content: "Hello, ";  
}  
  
p:after {  
    content: "world!";  
}

In diesem Beispiel wird der Text „Hallo“ vor jedem Absatz (

-Element) und am Ende der Text „Welt!“ eingefügt. Beachten Sie, dass das Inhaltsattribut erforderlich ist und den Inhalt des Pseudoelements definiert.