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
3 Answers
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.
2 Comments
Horen
I'm using it on media queries in email css. I would prefer to use different selectors but from what I know this is the only way to get it to work.
BoltClock
I would recommend against using
*= for class names and other delimited values for the reason stated in Hashem Qolami's answer.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;
}
From the MDN:
[attr~=value]Represents an element with an attribute name ofattrwhose value is a whitespace-separated list of words, one of which is exactly "value".
5 Comments
Horen
My bad - I meant it would fail for
<td class="foo baz bar" /> - I updated the questionHoren
yes,
td[class~="foo"][class~="baz"] works perfectly. What the difference to td[class*="foo"][class*="bar"]?
Hashem Qolami
@Horen You are welcome. Using
[class*="foo"] my cause unexpected issues as it selects <td class="foobar"> element as well. As andyb mentioned in his comment.Hashem Qolami
@Horen Take a look at this example. Toggle the selectors to see the difference.
BoltClock
@Horen: The only way for
~= attribute selectors to work where class selectors wouldn't in your case is if you were not actually working with HTML...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 *
2. Demo for ~
Multiple attribute matches
1 Comment
BoltClock
You might as well post this in a comment instead.
td[class~="foo"][class~="bar"]will match<td class="foo bar">exactly and will not match<td class="foobar bar"><td class="foo baz bar" />- I updated the questionclassattribute?