CODEWITHSUNDEEP
htmlcsscss-selectors
Horen
Horen

Reputation: 11382

CSS substring matching attribute selectors: Contains multiple class names

A CSS "contains" selector is

td[class*="foo"]

I can select multiple classes with

td[class*="foo bar"]

This however will fail for <td class="foo baz bar" />

How can I do a CSS "contains" wildcard select?

BTW: I cannot use td.foo.bar

Upvotes: 7

Views: 2809

Answers (3)

Etheryte
Etheryte

Reputation: 25310

The selector you're looking for is as follows, see this question for more details.

td[class*="foo"][class*="bar"]

However, if you need to use selectors like that then it's often a sign that your class name logic is bad.

Upvotes: 9

Zword
Zword

Reputation: 6793

Visit : CSS-Tricks (CSS Attribute Selectors)

From the above for finding a match of a given string to the string in the class specified according to your question , the only option I find working and correct is * and ~.

1. Demo for *

* CSS-selector

2. Demo for ~

~ CSS-selector

Multiple attribute matches

Multiple attribute

Upvotes: 4

Hashem Qolami
Hashem Qolami

Reputation: 99464

Honestly I don't know what you mean by "failing" td[class*="foo bar"] selector as it seems working to me in your particular case.

However, since the class names are separated by white spaces, you could use multiple [attr~=value] attribute selectors to select the elements having the classes as follows:

td[class~="foo"][class~="baz"] {
  background-color: gold;
}

WORKING DEMO.

From the MDN:

[attr~=value] Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".

Upvotes: 5

Related Questions