CSS class selector wildcard
This question already has an answer here:
- Is there a CSS selector by class prefix? 4 answers
So I was wondering if there was a way to throw a wildcard into my CSS?
I have several classes that are
.button-3, etc. within a
button element. I want to get all the
.button-* classes to define.
Is it possible to do something like:
Use an attribute selector:
[attr*=value]- Represents an element with an attribute name of attr and whose value contains at least one occurrence of string “value” as substring.
As Chad points out, it is entirely possible that an element can contain a class such as
this-is-my-button-class. In which case, that undesired element would be selected. In order to prevent this, you could use a combination of two selectors:
button [class^="button-"] ensures that the element will be selected if it starts with
button-. Since it’s possible the element’s first class doesn’t start with
button-, the selector
[class*=" button-"] (note the whitespace), ensures that it will be selected.