Pseudoklassen

Pseudoklassen sind wie Spezialregeln, mit denen du bestimmte Elemente auf einer Webseite ändern kannst, basierend auf bestimmten Situationen. Sie werden zusammen mit normalen CSS-Selektoren verwendet, um genau zu sagen, in welcher Situation dieses Element angepasst werden soll. Zum Beispiel kannst du damit jedes zweite Element anders gestalten oder das Aussehen ändern, wenn jemand mit der Maus darüber fährt (das nennt man "hover"). Die Syntax dafür ist einfach: Du hängst sie einfach an den normalen CSS-Selektor mit einem Doppelpunkt (:) an. Ein Beispiel dafür wäre:

.button:hover {
 background-color: #0d6158;
}

Mit diesem Code wird allem Elementen mit der Klasse "button" eine Hintergrundfarbe vergeben, falls du mit der Maus über das Element fährst.

Liste mit Pseudoklassen

Pseudoelemente

Grundsätzlich wird der Inhalt einer Webseite mit HTML erstellt, und nur diese Elemente können mit CSS bearbeitet werden. Mit sogenannten Pseudoelementen kannst du jedoch auch Teile der Webseite gestalten, die nicht direkt in HTML-Tags stehen. Aus meiner Sicht, gibt es zwei Arten von Pseudoelementen: Mit machen kannst nur bestimmte Teile eines vorhandenen Elements bearbeiten, während andere komplett neue Elemente erstellen, die nicht in HTML erstellt wurden. Pseudoelemente werden durch zwei Doppelpunkte (::) gekennzeichnet, im Gegensatz zu Pseudoklassen. Damit kannst du Pseudoklassen und Pseudoelemente leicht unterscheiden.

Beispielsweise kann mit dem Pseudoelement "::fist-line" nur die Erste Zeile eines Textes ausgewählt und verändert werden:

p::first-letter {
 font-size: 5rem;
}

Mithilfe von "::before" & "::after" kannst du neue Elemente in CSS erstellen und bearbeiten. Before und After können beide pro Element je nur einmal vergeben werden. Damit Before und After auf der Website sichtbar sind, musst du ihnen einen Inhalt zuweisen (content:). Selbst wenn du nur die Hintergrundfarbe verwenden möchtest, musst du trotzdem einen Inhalt festlegen. Dieser kann sogar leer sein (contetnt : "";), aber wenn kein Inhalt angegeben wird, verschwindet das Element von der Website. Das neue Element mit seinem Inhalt wird vor bzw. nach dem eigentlichen Inhalt des Elements eingefügt.

Before und After werden meistens für Design-Elemente verwendet oder um kleine Akzente zu setzen. Wichtig ist, dass du alle relevanten Informationen direkt im HTML definierst. Beispielsweise können mit diesen Pseudoelementen Hovereffekte erstellt werden, die ein zusätzliches Element benötigen:

#container .button-2::after {

             content: "";

             position: absolute;

             top: 0;

             left: 0;

             width: 0%;

             height: 100%;

             background-color: #0d6158;

             z-index: -1;

        }


        
        #container .button-2:hover::after {

             width: 100%;

             left: 0;

        }

Ein Nachteil von Pseudoelementen ist, dass du diese nicht direkt mit JavaScript verändern kannst.

Liste mit Pseudoelementen