ID-Selektor

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 13 von 76.

Der ID-Selektor wird verwendet, um ein bestimmtes HTML-Element basierend auf dem Wert seines id-Attributs anzusprechen. Im Gegensatz zu Klassen-Selektoren, die verwendet werden können, um mehrere Elemente zu gestalten, sind ID-Selektoren eindeutig und können nur auf ein einzelnes Element auf einer Seite angewendet werden. Dies macht sie nützlich für das Styling einzelner Elemente mit spezifischen Stilen, die auf kein anderes Element angewendet werden sollten.

Um ein Element mit einer bestimmten ID in Ihrem CSS anzusprechen, verwenden Sie ein Raute-Symbol (#) gefolgt vom ID-Wert. Hier ist die grundlegende Syntax für die Verwendung eines ID-Selektors:

#idname {
    property: value;
}

Zum Beispiel:

#intro {
    color: blue;
    font-size: 20px;
}

In diesem Beispiel zielt der ID-Selektor #intro auf das Element mit der ID „intro“. Die Deklarationen setzen für dieses Element die Textfarbe auf Blau und die Schriftgröße auf 20 Pixel.

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit verschiedenen Elementen gegeben, darunter eine Überschrift (<h1>), ein Absatz (<p>) und ein Bereich (<div>). Deine Aufgabe besteht darin, einen ID-Selektor zu verwenden, um ein Bereichselement zu gestalten. Befolge die folgenden Schritte:

Füge dem <div>-Element ein id-Attribut mit dem Wert "special" hinzu.
Schreibe eine CSS-Regel mit einem ID-Selektor, die das Element mit der ID "special" auswählt. Lege die Hintergrundfarbe dieses Elements auf Gelb und die Textfarbe auf Rot fest.

Probier es selbst

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