ID-Selektoren
Lektion 5 von 15 im Kurs CSS Selectors von Coddy.
Ein ID-Selektor ist eine Art von CSS-Selektor, der Elemente auswählt, die ein bestimmtes ID-Attribut haben. Das ID-Attribut ist ein benutzerdefiniertes Attribut, das Sie HTML-Elementen hinzufügen können, um sie eindeutig zu identifizieren.
Um Elemente mit einer bestimmten ID auszuwählen, verwenden Sie ein Raute-Symbol (#) gefolgt vom ID-Wert. Zum Beispiel wählt der Selektor #my-id das Element mit der ID my-id aus.
Hier ist ein Beispiel dafür, wie man einen ID-Selektor verwendet, um eine Webseite zu gestalten:
#my-id {
color: red;
font-size: 2em;
}Um einem Element eine ID hinzuzufügen, schreiben Sie:
<div id="my-id"></div>Genau wie bei den Klassen-Selektoren wird diese CSS-Regel das Element mit der ID my-id so gestalten, dass es rot ist und eine Schriftgröße von 2em hat.
Aufgabe
EinfachHier ist eine Übung, um dein Verständnis von ID-Selektoren zu testen:
- Erstelle eine Webseite mit zwei
div-Elementen. - Gib dem ersten
div-Element die IDmy-id. - Verwende einen ID-Selektor, um das
div-Element mit der IDmy-idso zu gestalten, dass es eine andere Farbe als Schwarz hat und eine Schriftgröße von 30px aufweist.
Probier es selbst
<html>
<head>
<title>ID Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
</body>
</html>