CSS-Selektorgruppen

Selektor-Gruppierung

Angenommen, Sie möchten, dass sowohl h2-Elemente als auch Absätze grau sind. Der einfachste Weg, dies zu erreichen, ist die folgende Erklärung zu verwenden:

h2, p {color:gray;}

Platzieren Sie die h2- und p-Selektoren auf der linken Seite der Regel und trennen Sie sie mit Komma, um eine Regel zu definieren. Der Stil auf der rechten Seite (color:gray;) wird auf die Elemente angewendet, die von diesen Selektoren referenziert werden. Das Komma teilt dem Browser mit, dass die Regel zwei verschiedene Selektoren enthält. Ohne dieses Komma wäre die Bedeutung der Regel komplett anders. Siehe Nachfolger-Selektoren.

Man kann eine beliebige Anzahl von Selectoren zusammenfassen, es gibt keine Beschränkungen dafür.

Zum Beispiel, wenn Sie viele Elemente in Grau darstellen möchten, können Sie Regeln wie folgt verwenden:

body, h2, p, table, th, td, pre, strong, em {color:gray;}

Tipp:Durch die Gruppierung können Ersteller bestimmte Arten von Stilen "zusammenpressen", was zu einer kürzeren Stylesheet führt.

Die folgenden zwei Regelgruppen erzielen dasselbe Ergebnis, aber es ist klar zu erkennen, welche leichter zu schreiben ist:

/* Keine Gruppierung */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* Gruppierung */
h1, h2, h3, h4, h5, h6 {color:blue;}

Versuchen Sie es selbst

Die Gruppierung bietet einige interessante Auswahlmöglichkeiten. Zum Beispiel sind alle Regelgruppen in diesem Beispiel äquivalent, jede Gruppe zeigt nur eine andere Methode zur Gruppierung von Auswahlen und Declarativen:

/* Gruppe 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* Gruppe 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* Gruppe 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

Versuchen Sie es selbst:

Beachten Sie, dass im Gruppe 3 die 'Anweisungsgruppierung' verwendet wird. Wir werden Ihnen später die 'Anweisungsgruppierung' vorstellen.

Wildcard-Selektor

CSS2 hat einen neuen einfachen Selektor eingeführt - den Wildcard-Selektor (universal selector), der durch einen Stern (*) dargestellt wird. Dieser Selektor kann mit jedem Element übereinstimmen, wie ein Platzhalter.

Zum Beispiel kann das folgende Regel jedes Element im Dokument rot machen:

* {color:red;}

Versuchen Sie es selbst

Diese Anweisung entspricht einer Gruppenselektorenliste aller Elemente im Dokument. Mit dem Wildcard-Selektor kann man mit nur einem Tastendruck (nur ein Sternchen) die color-Attributwerte aller Elemente im Dokument auf 'red' setzen.

Anweisungsgruppierung

Wir können sowohl die Selektoren als auch die Anweisungen gruppieren.

Angenommen, Sie möchten, dass alle h1-Elemente einen roten Hintergrund haben und mit einer 28 Pixel hohen Verdana-Schrift in blauer Textfarbe angezeigt werden, können Sie die folgenden Stile verwenden:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Diese Methode ist jedoch nicht besonders effizient. Besonders wenn wir eine Liste solcher Stile für ein Element mit mehreren Stilen erstellen, wird es lästig. Stattdessen können wir die Anweisungen zusammenfassen:

h1 {font: 28px Verdana; color: white; background: black;}

Dies hat die gleiche Wirkung wie die 3 vorherigen Zeilen im Stil.

Beachten Sie, dass es sehr wichtig ist, dass Sie die Anweisungen gruppieren und am Ende jeder Anweisung ein Semikolon verwenden. Der Browser ignoriert die Leerzeichen im Stil. Solange Sie ein Semikolon verwenden, können Sie ohne Bedenken das folgende Format verwenden, um Stile zu erstellen:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Versuchen Sie es selbst

Wie finden Sie die Lesbarkeit dieser Schreibweise?

Allerdings wird der Benutzeragent diesen Stil als folgt interpretieren, wenn der zweite Semikolon ignoriert wird:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Versuchen Sie es selbst

Weil 'background' für 'color' kein gültiger Wert ist und da nur ein Schlüsselwort für 'color' angegeben werden kann, wird der Benutzeragent diese 'color'-Anweisung vollständig ignorieren (einschließlich 'background: black'). Der h1-Titel wird daher nur blau angezeigt, ohne roten Hintergrund, und es ist sehr wahrscheinlich, dass der h1-Titel überhaupt nicht blau wird. Im Gegenteil, diese Titel werden nur in der Standardfarbe (meistens schwarz) angezeigt und haben überhaupt keine Hintergrundfarbe. Die 'font: 28px Verdana'-Anweisung funktioniert weiterhin ordnungsgemäß, da sie tatsächlich mit einem Semikolon endet.

Wie die Gruppierung vonSelektoren ist auch die Gruppierung vonDeklarationen eine bequeme Methode, um die Länge der Stilblöcke zu verkürzen, sie klarer und einfacher zu warten zu machen.

Tipp:Es ist eine gute Gewohnheit, nach dem letzten Ausdruck einer Regel auch einen Semikolon hinzuzufügen. Wenn Sie einen weiteren Ausdruck zu der Regel hinzufügen, müssen Sie sich keine Sorgen machen, dass Sie ein Semikolon vergessen.

Gruppierung vonSelektoren und Deklarationen

Wir können in einer Regel die Gruppierung vonSelektoren und Deklarationen kombinieren, um mit wenigen Anweisungen relativ komplexe Stile zu definieren.

Die folgenden Regeln spezifizieren eine komplexe Stil für alle Überschriften:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Versuchen Sie es selbst

Diese Regel definiert den Stil aller Überschriften mit weißem Hintergrund und grauem Text, einem Innenabstand von 10 Pixeln und einer 1 Pixel dicken festen Umrandung, und der Textschrift ist Verdana.