3.4 Klassenselektor

Bisher haben wir festgelegt, dass alle HTML-Elemente vom Typ img horizontal zentriert werden.

CSS

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Abb. 3-12: Selektion aller img-Elemente

Wird bei einer CSS-Regel als Selektor ein Elementname verwendet, gelten die hinterlegten Formatierungen für alle Elemente mit diesem Namen (Element- bzw. Typselektor).

Merke: Element- bzw. Typselektor

Wir möchten jedoch nicht alle img-Elemente zentrieren. Auf der Startseite soll zum Beispiel das Bild, das den Haupteingang der Schule zeigt, zentriert werden, nicht jedoch das Bild mit dem Logo.

Daher werden wir gezielt die img-Elemente kennzeichnen, die zentriert dargestellt werden sollen. Dazu tragen wir in ihrem Attribut class den Klassennamen zentriert ein. Der Klassenname kann grundsätzlich frei gewählt werden, darf jedoch nicht mit einer Ziffer beginnen und keine Sonderzeichen enthalten.

HTML

Abb. 3-13: Dieses img-Element gehört zur Klasse zentriert.

In der CSS-Regel ersetzen wir den Typselektor img durch den Klassenselektor .zentriert. Ein Klassenselektor beginnt mit einem Punkt, auf den der Name der jeweiligen Klasse folgt.

CSS

.zentriert {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Abb. 3-14: Selektion aller HTML-Elemente mit der Klasse zentriert

Ein Klassenselektor besteht aus einem Punkt, auf den der Name der entsprechenden Klasse folgt.

Wird bei einer CSS-Regel ein Klassenselektor verwendet, gilt die Regel für alle HTML-Elemente, deren Attribut class den jeweiligen Klassennamen enthält.

Merke: Klassenselektor

Die CSS-Regel ist nun nicht mehr auf img-Elemente beschränkt, sondern gilt für jedes HTML-Element, dem die Klasse zentriert zugewiesen ist. Soll die CSS-Regel nicht für alle Elemente mit der Klasse zentriert gelten, sondern nur für Elemente, die vom Typ img sind, muss vor dem Klassenselektor .zentriert der Typselektor img angegeben werden.

CSS

img.zentriert {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Abb. 3-14: Selektion aller img-Elemente mit der Klasse zentriert

Wird bei einer CSS-Regel vor dem Klassenselektor ein Elementname (Typselektor) angegeben, gilt die Regel nur für HTML-Elemente, die sowohl diesen Elementnamen als auch die angegebene Klasse besitzen.

Merke: Verbindung von Typ- und Klassenselektor

Aufgabe 3-2: Klassenselektor

Aufgabe

Sorgen Sie dafür, dass die in der CSS-Datei styles.css enthaltene Regel, die Block-Elemente horizontal zentriert darstellt, den Klassenselektor zentriert erhält. Die Regel soll außerdem nicht auf img-Elemente beschränkt sein.
Weisen Sie dem img-Element, das auf der Startseite index.html den Haupteingang der Schule zeigt, die Klasse zentriert zu.

Vorschau

Abb. 3-15: Startseite index.html (Zwischenstand Kapitel 3-4)

Lösung

HTML

<!DOCTYPE html>

<html lang="de">

    <head>
        <meta charset="utf-8">
        <title>Kaufmännische Schule Tauberbischofsheim</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>

    <body>
        <div>
            <header>
                <img src="img/logo.png" alt="Logo der Kaufmännischen Schule Tauberbischofsheim">
                <h1>Kaufmännische Schule Tauberbischofsheim</h1>
                <nav>
                    <ul>
                        <li> <a href="index.html">Startseite</a> </li>
                        <li> <a href="bildungswege.html">Bildungswege</a> </li>
                        <li> <a href="termine.html">Termine</a> </li>
                        <li> <a href="impressum.html">Impressum</a> </li>
                    </ul>
                </nav>
            </header>

            <main>
                <h2>Herzlich Willkommen</h2>
                <img class="zentriert" src="img/eingang.jpg" alt="Haupteingang der Kaufmännischen Schule Tauberbischofsheim">
                <p>Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.</p>
            </main>
        </div>
    </body>

</html>

Abb. 3-16: Quellcode der Startseite index.html (Zwischenstand Kapitel 3-4)

CSS

body {
    background-color: #DDF9CC;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

h2 {
    text-align: center;
    font-style: italic;
    text-decoration: underline;
    margin-top: 10px;
    margin-bottom: 10px;
}

p {
    text-align: center;
    line-height: 1.5;
}

.zentriert {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Abb. 3-17: CSS-Datei styles.css (Zwischenstand Kapitel 3-4)