Typ, Klasse und ID

Eine Regel wirkt nur da, wo ihr Selektor trifft. Und ein Selektor, der zu viel trifft, nervt genauso wie einer, der gar nichts trifft. Es kommt also darauf an, möglichst genau zu sagen, wen du meinst, ohne jedem Element von Hand eine Markierung zu verpassen. Darum geht es in diesem ganzen Abschnitt.

Drei Selektoren sind die Grundlage.

<div id="inhalt">
  <p>Ein Absatz.</p>
  <div class="karte">
    <p>Ein Absatz in der Karte.</p>
  </div>
</div>

/* Typ: trifft jedes Element dieser Sorte */
p {
  color: #3f3f46;
}

/* Klasse: trifft alles mit class="karte" */
.karte {
  border: 1px solid #d4d4d8;
  padding: 16px;
}

/* ID: trifft genau ein Element */
#inhalt {
  background-color: #fafafa;
  padding: 16px;
}

Der Typselektor ist einfach der Elementname: p trifft jeden Absatz im Dokument, h2 jede Überschrift dieser Ebene, a jeden Link. Kein Sonderzeichen davor.

Der Klassenselektor beginnt mit einem Punkt. .karte trifft jedes Element, das class="karte" trägt, egal welche Sorte Element das ist und wo im Dokument es steht.

Der ID-Selektor beginnt mit einer Raute. #inhalt trifft das Element mit id="inhalt", und davon darf es pro Seite genau eines geben. Das schreibt HTML so vor.

Diese drei Schreibweisen begegnen dir gleich noch einmal, und zwar da, wo man sie nicht erwartet. Auf einem breiten Bildschirm steht mit eingeschaltetem Inspector oben im Auskunftsstreifen div#inhalt und beim Kasten darin div.karte. Die Namen stehen dort so, wie du das Element mit einem Selektor treffen würdest. Du siehst also nicht nur, was du vor dir hast, sondern gleich, wie du es ansprichst.

01 / 03Warum du fast immer Klassen nimmst

Von den dreien ist die Klasse das Arbeitspferd, und dafür gibt es gute Gründe.

Der Typselektor trifft alles. Für Grundlagen passt das, etwa eine Schriftgröße für alle Absätze. Sobald eine Seite wächst, ist es schnell zu viel. Deine Navigation besteht auch aus Listenpunkten, und die sollen meistens anders aussehen als die Aufzählung im Text.

Die ID trifft genau eines, und damit lässt sich nichts wiederverwenden. Zwei Karten brauchen zwei IDs und zwei Regeln, obwohl sie gleich aussehen sollen. Dazu kommt ein zweites Problem, das Spezifität heißt und in Abschnitt 3 ausgerechnet wird. Eine ID setzt sich im Konfliktfall so stark durch, dass sie sich kaum überschreiben lässt. Mit einer Klasse kommst du nicht dagegen an, egal wie viele Klassen du aneinanderreihst.

Die Klasse liegt dazwischen. Sie darf mehrfach vorkommen, sie beschreibt eine Rolle statt eines Ortes, und du kannst mehrere davon mischen.

<div class="karte">Eine normale Karte</div>
<div class="karte karte--wichtig">Eine wichtige Karte</div>
<div class="karte karte--gross">Eine große Karte</div>

.karte {
  border: 1px solid #d4d4d8;
  padding: 16px;
  margin-bottom: 12px;
}

.karte--wichtig {
  border-color: #b91c1c;
  color: #b91c1c;
}

.karte--gross {
  padding: 32px;
  font-size: 20px;
}

Mit class="karte karte--wichtig" trägt das Element beide Klassen, also greifen beide Regeln. Die eine bringt das Gemeinsame, die andere die Abweichung. Dieses Muster begegnet dir überall, und die doppelten Bindestriche im Namen sind eine verbreitete Konvention dafür. Was die beiden Striche bedeuten und wann sie sich lohnen, kommt in Lektion 16.1.

Für IDs bleiben damit vor allem zwei Verwendungen. Sie dienen als Sprungziel für Links, und sobald du Formulare baust, verknüpfen sie ein label mit seinem Eingabefeld. Im Stylesheet begegnen sie dir selten.

02 / 03Der Universalselektor

<div class="rahmen">
  <h2>Alles bekommt einen Rahmen</h2>
  <p>Auch dieser Absatz, und <strong>dieses Wort</strong> darin.</p>
</div>

* {
  border: 1px solid #93c5fd;
}

Der Stern trifft jedes Element. Alleine ist er selten sinnvoll, und auf der Seite siehst du auch, warum: Wirklich jedes Element bekommt einen Rahmen, sogar das strong mitten im Satz.

Zwei Anwendungen sind trotzdem alltäglich. Die eine kommt in Lektion 4.2, wo eine einzige Regel mit * das Rechnen mit Größen für die ganze Seite umstellt. Die andere ist dieses Beispiel als Werkzeug, ein Rahmen um alles, damit du siehst, wo die Kästen wirklich sitzen. Ein rustikaler Trick, aber ein guter.

Bei der Frage, welche Regel gewinnt, zählt * überhaupt nichts. Auch dazu mehr in Abschnitt 3.

03 / 03Groß- und Kleinschreibung

Klassen- und ID-Namen unterscheiden Groß- und Kleinschreibung. .Karte und .karte sind zwei verschiedene Dinge, und so ein Tippfehler ist unangenehm zu finden, weil beide Schreibweisen gültig aussehen. Bei Elementnamen ist die Schreibung dagegen egal, P trifft dieselben Absätze wie p.

Ich schreibe Klassen und IDs deshalb immer klein und trenne Wörter mit Bindestrich. Dann stellt sich die Frage gar nicht.

In der Aufgabe kommt jede der drei Schreibweisen einmal dran, an Absätzen, an Karten und an einem Bereich mit ID.