CSS selector wildcard inside class name

Question

I would like to know if it's possible to target all classes that starts with col- and ends with 12 only?

For example classes like:

.col-sm-12
.col-md-12
.col-lg-12

but not classes like:

.col-sm-8
.col-lg-6

I tried with something like this which is not working:

[class^="col-*-12"] {
    border: 1px solid red;
}

Answer 1

You can use the following solution:

[class^="col-"][class$="-12"] {
    color:red;
}

<span class="col-lg-12">col-lg-12</span>
<span class="col-md-12">col-md-12</span>
<span class="col-lg-8">col-lg-8</span>
<span class="col-md-9">col-md-9</span>

Explanation:

• [class^="col-"]: The class have to start with col-.
• [class$="-12"]: The class have to end with -12.

You can find a very good overview of the attribute pattern on CSS tricks.