Grundlegende Selektoren und Farben

Lerne, Elemente mit Element-, Klassen- und ID-Selektoren gezielt anzusprechen, und weise ihnen dann Farben zu.

9 Min. · 3 Fragen

Ein Selektor ist der Teil einer CSS-Regel, der sagt, welche Elemente gestaltet werden. Der einfachste ist der Element-Selektor: Du schreibst den Tag-Namen, ohne spitze Klammern. p zielt auf jeden Absatz, h1 auf jede Überschrift oberster Ebene. Das funktioniert gut, ist aber manchmal zu grob: Was, wenn du nur einen Absatz von zehn einfärben möchtest? Hier kommen Klassen und IDs ins Spiel.

Eine Klasse ist ein Etikett, das du mit dem class-Attribut an eines oder mehrere HTML-Elemente hängst. Auf der CSS-Seite sprichst du sie mit einem Punkt an: .important wählt jedes Element mit class="important" aus. Eine ID ist ein eindeutiges Etikett: Sie darf pro Seite nur einmal vorkommen, zum Beispiel am Header. Auf der CSS-Seite sprichst du sie mit einer Raute an: #header.

<h1 id="main-title">My cooking blog</h1>
<p class="highlight">Recipe of the day: the pie.</p>
<p>A perfectly ordinary paragraph.</p>
<p class="highlight">Tip: preheat the oven.</p>

#main-title {
  color: darkgreen;
}

.highlight {
  background-color: yellow;
}

p {
  color: black;
}

In diesem Beispiel wird die Überschrift dunkelgrün, die beiden mit highlight versehenen Absätze bekommen einen gelben Hintergrund (background-color legt die Hintergrundfarbe fest), und jeder Absatz hat schwarzen Text. Merke dir den Unterschied: Eine Klasse ist auf beliebig vielen Elementen wiederverwendbar, während eine ID innerhalb der Seite eindeutig ist. Im Zweifel nimm eine Klasse.

Jetzt reden wir über Farben. CSS akzeptiert mehrere Schreibweisen. Farbnamen (red, blue, orange...) sind einfach, aber begrenzt. Die hexadezimale Schreibweise beginnt mit #, gefolgt von sechs Zeichen, die den Rot-, Grün- und Blauanteil dosieren: #ff0000 ist ein reines Rot. Schließlich drückt die rgb()-Schreibweise dieselben Dosierungen mit Zahlen von 0 bis 255 aus: rgb(255, 0, 0) ist ebenfalls ein reines Rot.

.highlight {
  color: tomato;
  background-color: #fff3cd;
}

#main-title {
  color: rgb(0, 100, 0);
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Welcher CSS-Selektor zielt auf jedes Element mit class="menu"?
   • #menu
   • .menu
   • menu
   • class.menu
2. Was ist der Hauptunterschied zwischen einer Klasse und einer ID?
   • Eine ID kann auf mehreren Elementen stehen, eine Klasse nicht
   • Eine Klasse ist wiederverwendbar, eine ID muss innerhalb der Seite eindeutig sein
   • Klassen funktionieren nur bei Absätzen
3. Welcher dieser Werte steht für ein reines Rot?
   • rgb(0, 0, 255)
   • #00ff00
   • #ff0000
   • rgb(0, 255, 0)