Können Sie ein Element mit CSS nur als Ziel festlegen, wenn 2 Klassen vorhanden sind?

83

Wie Sie wahrscheinlich bereits wissen, haben Sie möglicherweise mehrere Klassen für Elemente, die durch ein Leerzeichen getrennt sind.

Beispiel

<div class="content main"></div>

Und mit CSS können Sie dies diventweder mit .contentoder erreichen .main. Gibt es eine Möglichkeit, genau dann darauf abzuzielen, wenn beide Klassen vorhanden sind?

Beispiel

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

Welchen CSS-Selektor würde ich verwenden, um nur den ersten zu erhalten div(vorausgesetzt, ich kann ihn nicht verwenden .content:first-childoder ähnliches)?

css css-selectors Alex
quelle

Antworten:

133

Ja, verketten Sie sie einfach : .content.main. Siehe CSS-Klassenauswahl .

Beachten Sie jedoch, dass der Internet Explorer bis Version 6 nicht mehrere Klassenselektoren unterstützt und nur den letzten Klassennamen berücksichtigt.

Gumbo
quelle
Solange das ist ‚bis zu‘ und nicht ‚inklusive‘ IE6 :)
alex
Nein, IE6 versteht verkettete CSS-Selektoren nicht richtig. Diese Regel gilt für alle Elemente mit class = "main", unabhängig davon, ob sie auch class = "content" sind
Gareth
Eine Illustration für IE6 im
Vergleich zu
11

Nur deswegen (ich empfehle Ihnen nicht wirklich, dies zu tun) gibt es einen anderen Weg, dies zu tun:

.content[class~="main"] {}

Oder:

.main[class~="content"] {}

Referenz: http://www.w3.org/TR/CSS2/selector.html

E [foo ~ = "Warnung"] Entspricht jedem E-Element, dessen Attributwert "foo" eine Liste von durch Leerzeichen getrennten Werten ist , von denen einer genau gleich "Warnung" ist.

Demo: http://jsfiddle.net/eXrSg/

Warum dies tatsächlich nützlich ist (zumindest für IE6):

Da IE6 nicht mehr Klassen unterstützen, können wir nicht verwenden .content.main, aber es gibt einige Javascript - Bibliotheken wie IE-7.js , die das Attribut Selektor ermöglichen, scheinen aber immer noch zum Scheitern verurteilt , wenn es um mehrere Klassen kommt. Ich habe diese Problemumgehung in IE6 mit Javascript getestet, das die Attributauswahl aktiviert, und es ist hässlich, aber es funktioniert.

Ich habe noch kein Skript gefunden, mit dem IE6 mehrere Klassenselektoren unterstützt, aber ich habe viele gefunden, die Attributselektoren aktivieren. Wenn jemand einen kennt, der funktioniert , rufen Sie mich bitte in den Kommentaren an, damit ich diese Problemumgehung loswerden kann.

Wesley Murch
quelle