2. CSS: Formatierung und Anordnung mit Cascading Style Sheets

2.3 Pseudo-Klassen, Pseudo-Elemente, Counter

Pseudo-Klassen.

Mit Pseudo-Klassen lässt sich eine Untermenge von Elementen auswählen, die nicht etwa durch das Setzen des class-Attributes definiert wurde, sondern durch den Kontext der Webseite oder das Verhalten des Nutzers. Ein einfaches Beispiel ist die Gestaltung von Links, wie Sie im Unterschied zwischen Datei pseudo-classes-00.html (ohne style) und pseudo-classes-01.html (mit style) sehen. Der entsprechende CSS-Code sieht wie folgt aus:

                    a:visited {
                        text-decoration: none;
                        color:burlywood;
                    }
                    a:hover {
                        font-weight: bold;
                    }

Sie sehen hier: a:visited ist eine Pseudo-Klasse, die von allen a-Elementen diejenigen auswählt, die schon besucht worden sind. Analog wählt a:hover die Links aus, über denen gerade das Mauszeiger schwebt. tag:hover können Sie auch mit anderen Tags verwenden. Beliebt sind zum Beispiel Tables, bei denen die Zeile unter der Maus anders gefärbt wird, wie in example-css-03-table-hover.html. Hier ist der CSS-Code:

                    tr:hover {
                        background-color: beige;
                    }

Eine weitere beliebte Pseudo-Klasse ist nth-child. Hiermit wählen Sie Elemente aus, die in der Geschwisterfolge an einem bestimmten Punkt stehen. nth-child(3) würde zum Beispiel das dritte Kind auswählen. Interessanter als das dritte Kind ist folgender Code, der zum Beispiel genau die ungeraden Kinder auswählt: nth-child(odd). Hiermit können Sie zum Beispiel Tabellenzeilen alternierend färben, wie in

Pseudo-Elemente

Pseudo-Elemente sind Elemente, die durch CSS erst erzeugt werden. Für meine Algorithmen-Vorlesung könnte ich zum Beispiel etwas wie <div class="theorem"> wollen, wo dann jedem div der Klasse .theorem das Wort Theorem in bestimmter Gestaltung vorangestellt wird, ohne dass ich es extra hinzufügen muss. Ein Beispiel finden Sie in pseudo-element-00.html.

                    .theorem {
                        padding: 20px;
                        border-radius: 10px;
                        margin: 20px;
                        background-color: whitesmoke;
                    }
            
                    .theorem::before {
                        content: "Theorem. ";
                        font-weight: bold;
                    }

Beachten Sie: .theorem { ... } gestaltet die Klasse .theorem. Mit yourSelector::before { ... } stellen Sie allen ausgewählten Elementen ein Element an die erste Position. Interessant wird das, wenn Sie es mit Zählern kombinieren.