Mehrere Klassen- / ID- und Klassenselektoren

Können Sie den Unterschied zwischen diesen beiden Selektoren erkennen?

#header.callout {  }

#header .callout { }

Sie sehen fast identisch aus, aber die obere hat keinen Leerraum zwischen #header und .callout, während die untere einen hat. Dieser kleine Unterschied macht einen großen Unterschied in dem, was er tut. Für einige von Ihnen mag der obere Selektor wie ein Fehler erscheinen, aber es ist tatsächlich ein sehr nützlicher Selektor. Sehen wir uns den Unterschied an, was der obere Selektor bedeutet und erkunden wir mehr von diesem Stilselektor.

Hier ist die „einfache Sprache“ von #header .callout

Wählen Sie alle Elemente mit dem Klassennamen callout aus, die Nachfahren des Elements mit der ID header sind.

Hier ist die „einfache Sprache“ von #header.callout

Wählen Sie das Element aus, das die ID header und auch den Klassennamen callout hat.

Vielleicht macht diese Grafik das deutlicher

Kombinationen von Klassen und IDs

Der Hauptpunkt hierbei ist, dass Sie Elemente, die Kombinationen von classes und IDs haben, ansprechen können, indem Sie diese Selektoren ohne Leerzeichen aneinanderreihen.

ID- und Klassenselektor

Wie oben bereits erwähnt, können Sie Elemente mit einer Kombination aus ID und class ansprechen.

<h1 id="one" class="two">This Should Be Red</h1>

#one.two { color: red; }

Doppelklassenselektor

Zielen Sie auf ein Element, das alle von mehreren classes hat. Unten mit zwei classes gezeigt, aber nicht auf zwei beschränkt.

<h1 class="three four">Double Class</h1>

.three.four { color: red; }

Mehrfach

Wir sind hier nicht auf zwei beschränkt, wir können so viele classes und IDs zu einem einzigen Selektor kombinieren, wie wir wollen.

.snippet#header.code.red { color: red; }

Obwohl man bedenken muss, dass das schon ein wenig lächerlich wird.

Erfahren Sie mehr über die Auswahl von IDs, Klassen und mehreren Klassen bei DigitalOcean.

Beispiel

Wie nützlich ist das wirklich? Insbesondere bei IDs, sie sollen sowieso eindeutig sein, warum also mit einer class kombinieren? Ich gebe zu, die Anwendungsfälle für die ID-Versionen sind geringer, aber es gibt sicherlich Anwendungen. Eine davon ist das einfache Überschreiben von Stilen.

#header { color: red; }
#header.override { color: black; } 

Die zweite zielt auf dasselbe Element, überschreibt aber die Farbe, anstatt zu haben

.override { color: black !important }

Oder vielleicht wird der Selektor mit etwas noch Spezifischerem vorangestellt.

Nützlicher sind mehrere classes und deren Verwendung im „objektorientierten“ CSS-Stil, der gerade im Trend liegt. Nehmen wir an, Sie hatten eine Menge divs auf einer Seite und haben verschiedene beschreibende class-Namen darauf verwendet.

<div class="red border box"></div>
<div class="blue border box"></div>
<div class="green border box"></div>
<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>
<div class="border box"></div>

Sie alle teilen sich die class „box“, die vielleicht eine Breite oder eine Hintergrundtextur festlegt, etwas, das sie alle gemeinsam haben. Dann haben einige von ihnen Farbnamen als classes, dies wäre zur Steuerung der Farben im Inneren der Box. Vielleicht bedeutet Grün, dass die Box einen grünlichen Hintergrund und hellgrünen Text hat. Ein paar von ihnen haben einen class-Namen von „border“, vermutlich hätten diese dann einen Rahmen, während die anderen keinen hätten.

Richten wir also etwas ein

.box { width: 100px; float: left; margin: 0 10px 10px 0; }
.red { color: red; background: pink; }
.blue { color: blue; background: light-blue; }
.green { color: green; background: light-green; }
.border { border: 5px solid black; }

Cool, wir haben hier eine gute Werkzeugkiste, mit der wir neue Boxen erstellen können und eine Vielzahl von Optionen haben, wir können eine Farbe wählen und ob sie einen Rahmen hat oder nicht, nur durch die Anwendung einiger ziemlich semantischer classes. Der Klassename „toolbox“ ermöglicht es uns auch, eindeutige Kombinationen dieser classes anzusprechen. Zum Beispiel funktioniert vielleicht der schwarze Rahmen nicht auf den roten Boxen, beheben wir das.

.red.border { border-color: #900; }

Basierend auf dieser Demoseite.

Spezifität

Es ist auch wichtig zu beachten, dass die Spezifitätswerte von Selektoren wie diesem das gleiche Gewicht tragen wie wenn sie getrennt wären. Das ist es, was ihnen die Überschreibungskraft verleiht, wie im obigen Beispiel.

Erfahren Sie mehr über Spezifität in CSS bei DigitalOcean.

Browserkompatibilität

Alle guten aktuellen Browser unterstützen dies, ebenso wie IE ab Version 7. IE 6 ist ziemlich seltsam. Es wählt basierend auf dem letzten Selektor in der Liste aus. Also „.red.border“ wählt basierend auf „.border“ aus, was die Sache ruiniert. Aber wenn Sie IE 6 unterstützen, sind Sie ohnehin an solche Spielchen gewöhnt und können sie einfach mit bedingten Stilen beheben.