Zum Hauptinhalt springen
Version: 28Wa

Pseudoklassen

Über sogenannte Pseudoklassen können CSS-Regeln definiert werden, die auf bestimmte Zustände von HTML-Elementen reagieren.

Beispielsweise wenn ein Element besonders formatiert werden soll, wenn es mit der Maus berührt wird (:hover), oder wenn ein Element das erste Element einer Liste ist (:first-child).

Diese Pseudoklassen starten immer mit einem Doppelpunkt : und werden an den Selektor angehängt.

a {
    color: blue;
    &:hover {
        color: orange;
    }
}

In diesem Beispiel wird die Schriftfarbe aller Links (a-Elemente) auf Blau gesetzt. Wenn ein Link mit der Maus berührt wird (:hover), ändert sich die Schriftfarbe zu Orange.

Verschachtelte Regeln: &
Das &-Zeichen im obigen Beispiel steht für eine Ergänzung des aktuellen Selektors, in diesem Fall also a.Das obige Beispiel könnte also auch wie folgt geschrieben werden:
a {
    color: blue;
}
a:hover {
    color: orange;
}

Web-Dokumente ermöglichen, im Unterschied zu gedruckten Dokumenten, Intergaktionen mit den Betrachter:innen.

Beispiele​

<h3>Meine Qualifikationen</h3>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Markdown</li>
    <li>React</li>
    <li>TypeScript</li>
</ul>
li {
    color: darkblue;
    &:hover {
        background-color: lightgray;
    }
}
Info

Mit :hover wird der Hintergrund des Listenelements auf lightgray gesetzt, wenn die Maus über das Element fährt.

li {
    color: darkblue;
    transition-duration: 0.5s;
    &:hover {
        color: orange;
        list-style-type: square;
        transform: scale(1.2);
    }
}
Info

Mit :hover wird das entsprechende Listenelement

  • orange eingefärbt
  • das Listensymbol auf ein Quadrat (square) gesetzt
  • alles um den Faktor 1.2 vergrössert.

Damit die Änderung nicht abrupt geschieht, wird mit transition-duration die Übergangszeit festgelegt.

li {
    color: darkblue;
    &:first-child {
        color: orange;
    }
    &:nth-child(2n) {
        background-color: whitesmoke;
    }
    &:last-child {
        color: green;
    }
}
Info
  • Die Standardfarbe für Listenelemente ist darkblue.
  • Das erste Element (:first-child) wird in orange dargestellt.
  • Jedes zweite Element (:nth-child(2n)) bekommt einen Hintergrund von whitesmoke.
  • Das letzte Element (:last-child) wird in grün dargestellt.

Aufgaben​

Pseudoklassen anwenden

Ergänzen Sie die CSS-Regeln, so dass folgende Anforderungen erfüllt werden:

    Demo der Lösung
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
    <head>
        <style>
            main {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin: 10px;
                padding: 10px;
                width: 140px;
                height: 140px;
                border: 1px solid black;
                div {
                    width: 40px;
                    height: 40px;
                    background-color: lightgray;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition-duration: 0.5s;
                }
            }
        </style>
    </head>
    <body>
        <main>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </main>
    </body>
    </html>
    Laden...
    Steckbrief fertigstellen

    Stellen Sie den 👉 Steckbrief aus dem vorherigen Kapitel fertig, bevor Sie hier fortfahren.

    ⭐ Bonusaufgabe: Steckbrief individualisieren
    1. Individualisieren Sie den Steckbrief des vorherigen Kapitels inhaltlich auf Ihre Person (Steckbrief unten eingefügt). Das Bild können Sie vorerst als Platzhalter beibehalten und dann später durch ein eigenes Bild ersetzen.
    2. Fügen Sie mit CSS-Pseudoklassen interaktive Effekte hinzu, z.B.:
      • Ändern der Hintergrundfarbe, wenn die Maus über den Steckbrief fährt.
      • Vergrössern des Bildes, wenn die Maus darüber fährt.
      • Ändern der Schriftfarbe der Überschriften, wenn diese mit der Maus berührt werden.
    3. Laden Sie den fertigen Steckbrief herunter und fügen Sie nun ein persönliches Bild ein (lesen Sie im Kapitel "HTML Links" nach, wie Sie lokale Bilder einbinden können).
    <html>
    <head>
        <style>
        </style>
    </head>
    <body>
    <header>
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Maria Grünfelder">
        <div>
            <h1>Maria Grünfelder</h1>
            <address>
                <div>maria.gruenfelder@email.com</div>
                <div>Biel, Schweiz</div>
                <div>+41 32 123 4567</div>
            </address>
        </div>
    </header>

    <main>
        <div>
            <h2>About Me</h2>
            <p>Innovative software developer with 8+ years of experience in full stack development, passionate about building impactful products, and strong advocate for diversity in tech.</p>
        </div>

        <div>
            <h2>Experience</h2>
            <ol>
                <li>
                <strong>Senior Software Engineer</strong> ExampleCorp (2021–Present)
                <ul>
                    <li>Lead a team of 6 in developing scalable web applications.</li>
                    <li>Mentored junior developers and organized regular code review sessions.</li>
                </ul>
                </li>
                <li>
                    <strong>Software Developer</strong> WebSoft AG (2016–2021)
                    <ul>
                        <li>Developed and maintained client-facing platforms using React and Node.js.</li>
                        <li>Implemented CI/CD pipelines and improved deployment workflows.</li>
                    </ul>
                </li>
            </ol>
        </div>

        <div>
            <h2>Education</h2>
            <ol>
                <li>
                    <strong>M.Sc. Computer Science</strong> Technische Universität Berlin (2014–2016)
                </li>
                <li>
                    <strong>B.Sc. Computer Science</strong> Technische Universität Berlin (2010–2014)
                </li>
            </ol>
        </div>

        <div>
            <h2>Skills</h2>
            <ul>
                <li>HTML & CSS</li>
                <li>JavaScript (ES6+)</li>
                <li>React, Vue.js</li>
                <li>Node.js</li>
                <li>SQL, MongoDB</li>
                <li>CI/CD, Git</li>
                <li>Unit & Integration Testing</li>
            </ul>
        </div>

        <div>
            <h2>Certifications</h2>
            <ul>
                <li>AWS Certified Solutions Architect – Associate</li>
                <li>Scrum Master (PSM I)</li>
            </ul>
        </div>

        <div>
            <h2>Languages</h2>
            <ul>
                <li>German (native)</li>
                <li>English (fluent)</li>
                <li>French (intermediate)</li>
            </ul>
        </div>

        <div>
            <h2>Hobbies</h2>
            <ul>
                <li>Rock Climbing</li>
                <li>Photography</li>
                <li>Travel</li>
                <li>Volunteering at coding workshops</li>
            </ul>
        </div>

        <div>
            <h2>Fun Facts</h2>
            <ul>
                <li>Completed the Berlin Marathon twice</li>
                <li>Proud owner of a rescue dog named Pixel</li>
                <li>Sings in a jazz band</li>
            </ul>
        </div>

        <div>
            <h2>References</h2>
            <p>Available upon request</p>
        </div>
    </main>
    </body>
    </html>
    CC 4.0