Egyptian Egyptian - 6 months ago 9
CSS Question

Is there any ability to use regex to select the classes?

I know that there is ability to use the wildcard to select the elements in the page, like this https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

But I want to use the regex in the classes names like this



div.col-*-2-* {
color: green;
}

<div class="col-1-1-1">Don't select</div>
<div class="col-1-2-1">Select</div>
<div class="col-3-2-3">Select</div>
<div class="col-4-2-1">Select</div>
<div class="col-5-3-2">Don't select</div>




Answer

Your question is great. But the answer is NO.

There's no usage about the regular expression in css like what you stated.

For your solution, you can use like this:

[class*="col-1-2-"],[class*="col-2-2-"],[class*="col-3-2-"],[class*="col-4-2-"],[class*="col-5-2-"]{
  color: green;
}
<div class="col-1-1-1">Don't select</div>
<div class="col-1-2-1">Select</div>
<div class="col-3-2-3">Select</div>
<div class="col-4-2-1">Select</div>
<div class="col-5-3-2">Don't select</div>

As per your comment, you can use like this:

[class="col-1-2-1"],[class="col-2-2-1"],
[class="col-3-2-1"],[class="col-4-2-1"],
[class="col-5-2-1"]{
      color: green;
    }

As per the @RickHitchcock answer, you can implement like this to meet your requirment:

[class^="col-"][class*="-2-"][class$="-1"]:not([class^="col-2"]) {
  color: green;
}

Be careful:

As @torazaburo, Do not use weird constructed classnames and then try to do regexp-like stuff to address them. Instead, use multiple classes that allow you to address elements directly.