Is there a way to get elements with a class with a CSS attribute selector?
Something like this:
[class.=className]
2 Answers
From MDN:
[attr~=value]Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
So this:
[class~=className]
targets all elements that has the class "className" regardless of whether is has other classes around it.
2 Comments
Zachary Sakowitz
But wouldn't it get this element:
<p class="text-block">...</p> with this selector: class~=text because "text-block" contains the value "text"? Or would it only select text if it was in a word by itself?
lrpe
No, that would be how
[class*=text] works, because it simply checks if the attribute value contains something. [class~=text] looks for "text" as one word and treats the attribute value as a white-space separated string of words. One of these words must be a complete match.You could use this selector:
[class="className"], [class^="className "], [class$=" className"], [class*=" className "]
It's a bit long because we need to check whether it's just that class, whether it's at the beginning of the class attribute, the end, or in the middle.
1 Comment
lrpe
Or you could just use
[class~=className].
.=? developer.mozilla.org/fr/docs/Web/CSS/….=in my example because the.matches the.used in class selectors (.className).