Mehrere Attributwerte

Elemente können mehrere Klassennamen haben. Zum Beispiel

<div class="module accordion expand"></div>

Dann könnten Sie in CSS dieses Element anhand einer beliebigen davon abgleichen

/* All these match that */
.module { }
.accordion { }
.expand { }

Sie können Ihre Selektoren so einschränken, dass sie nur dann übereinstimmen, wenn mehrere davon vorhanden sind, zum Beispiel

// Will only match if element has both
.accordion.expand { }

Aber was ist mit anderen Attributen?

Klassen sind in der oben genannten Fähigkeit einzigartig. Andere Attribute werden nicht als „mehrere Werte“ behandelt, nur weil sie ein Leerzeichen enthalten. Zum Beispiel

<div data-type="module accordion expand"></div>

Dieses Element hat nur ein data-type-Attribut mit dem Wert „module accordion expand“, nicht drei eindeutige Werte „module“, „accordion“ und „expand“. Aber sagen wir, wir *wollten* Elemente anhand einzelner Werte auswählen können, so wie wir es mit Klassennamen können.

Das könnten wir tun, indem wir einen „*“ Substring-Matching Attributselektor verwenden, der übereinstimmt, wenn die angegebene Zeichenfolge irgendwo im Wert vorkommt

[data-type*="module"] {

}

oder nur übereinstimmen, wenn mehrere bestimmte „Werte“ vorhanden sind

[data-type*="accordion"][data-type*="expand"] {

}

Noch besser, verwenden Sie den durch Leerzeichen getrennten Selektor (z.B. [data-type~="expand"]). So werden Sie nicht durch etwas wie „expand“ getäuscht, das „expander“ abgleicht, obwohl Sie das nicht wollten.

[data-type~="accordion"][data-type~="expand"] {

}

Demo ansehen

Funktioniert in IE7+ (weil IE 7 der erste IE war, der Attributselektoren unterstützte)