Klassen-Selektor

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 12 von 76.

Der Klassenselektor wird verwendet, um HTML-Elemente basierend auf dem Wert ihres class-Attributs auszuwählen. Er ermöglicht es Ihnen, dieselben Stile auf mehrere Elemente in Ihrem Dokument anzuwenden. Klassenselektoren sind besonders nützlich, wenn Sie eine Gruppe von Elementen auf die gleiche Weise formatieren möchten, unabhängig von ihren Tag-Namen.

Um Elemente mit einer bestimmten Klasse in Ihrem CSS anzusprechen, verwenden Sie einen Punkt (.) gefolgt vom Klassennamen. Hier ist die grundlegende Syntax für die Verwendung eines Klassenselektors:

.classname {
    property: value;
}

Zum Beispiel:

.highlight {
    background-color: yellow;
    color: black;
}

In diesem Beispiel spricht der Klassen-Selektor .highlight alle Elemente mit der Klasse "highlight" an. Die Deklarationen setzen die Hintergrundfarbe auf Gelb und die Textfarbe auf Schwarz für diese Elemente.

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit verschiedenen Elementen gegeben, darunter Überschriften (<h1>, <h2>), Absätze (<p>) und Divisionen (<div>). Einige dieser Elemente haben ein class-Attribut. Ihre Aufgabe ist es, Klassenselektoren zu verwenden, um diese Elemente zu gestalten. Befolgen Sie die folgenden Schritte:

Fügen Sie dem <h1>-Element und dem ersten <p>-Element ein class-Attribut mit dem Wert "blue-text" hinzu.
Fügen Sie dem <h2>-Element und dem zweiten <p>-Element ein class-Attribut mit dem Wert "large-text" hinzu.
Schreiben Sie eine CSS-Regel unter Verwendung eines Klassenselektors, die auf alle Elemente mit der Klasse "blue-text" abzielt. Setzen Sie die Textfarbe dieser Elemente auf Blau.
Schreiben Sie eine CSS-Regel unter Verwendung eines Klassenselektors, die auf alle Elemente mit der Klasse "large-text" abzielt. Setzen Sie die Schriftgröße dieser Elemente auf 24 Pixel.

Spickzettel

Der Klassen-Selektor zielt auf HTML-Elemente basierend auf ihrem class-Attributwert ab. Verwenden Sie einen Punkt (.), gefolgt vom Klassennamen:

.classname {
    property: value;
}

Beispiel:

.highlight {
    background-color: yellow;
    color: black;
}

Dies zielt auf alle Elemente mit class="highlight" ab und wendet die angegebenen Stile an.

Probier es selbst

<html>
<head>
    <title>Class Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>