ID-Selektor

Teil des Abschnitts Styling with 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 spricht der ID-Selektor #intro das Element mit der ID „intro“ an. Die Deklarationen setzen die Textfarbe für dieses Element auf Blau und die Schriftgröße auf 20 Pixel.

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument mit verschiedenen Elementen gegeben, darunter eine Überschrift (<h1>), ein Absatz (<p>) und ein Bereich (<div>). Ihre Aufgabe ist es, einen ID-Selektor zu verwenden, um ein div-Element zu gestalten. Befolgen Sie die folgenden Schritte:

Fügen Sie dem <div>-Element ein id-Attribut mit dem Wert "special" hinzu.
Schreiben Sie eine CSS-Regel unter Verwendung eines ID-Selektors, die auf das Element mit der ID "special" abzielt. Setzen Sie die Hintergrundfarbe dieses Elements auf yellow und die Textfarbe auf red.

Spickzettel

Der ID-Selektor zielt auf ein bestimmtes HTML-Element unter Verwendung seines id-Attributs ab. ID-Selektoren sind eindeutig und können nur auf ein einzelnes Element auf einer Seite angewendet werden.

Verwenden Sie ein Raute-Symbol (#) gefolgt vom ID-Wert:

#idname {
    property: value;
}

Beispiel:

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

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>