CSS Schnellstart – Selektor: ID-Attribut

Wir konnten unsere Auswahl mit dem Klassenselektor schon sehr gut eingrenzen. Allerdings gibt es auch Fälle, bei denen du EIN spezielles Element auswählen willst.

Um ein Element eindeutig zu identifizieren haben Elemente dafür das id-Attribut. In unserem Beispiel wäre das zum Beispiel eine eindeutige Benutzernummer:

&lt;p id="benutzer-1" class="mann projektleitung"&gt;Stefan Steiler&lt;/p&gt;
&lt;p id="benutzer-2" class="frau assistenz"&gt;Petra Steiler&lt;/p&gt;
&lt;p id="benutzer-3" class="mann entwicklung"&gt;Andreas Anders&lt;/p&gt;
&lt;p id="benutzer-4" class="frau projektleitung"&gt;Andrea Anders&lt;/p&gt;

Um ein Element mit einer bestimmten id in CSS auszuwählen, verwendest du den Id-Selektor. Dieser sieht so aus:

#benutzer-1 {
  border-style: solid;
}

Der Selektor startet mit der Raute # gefolgt vom Namen aus dem id-Attribut.

CSS Schnellstart – Selektor: ID-Attribut

CSS Schnellstart – Modul 1 – CSS Grundlagen einfach verstehen