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;
}

Sebastian Brosch · Accepted Answer · 2018-03-09T08:44:31.447

17

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.

edited Mar 09 '18 at 08:44

answered Mar 09 '18 at 08:39

Sebastian Brosch

42,106
15
72
87

2

Wow, didn't know that they could be combined this way. Thanks a lot. – Meek Mar 09 '18 at 08:41

score 5 · Answer 2 · edited Feb 18 '19 at 13:38

[class^="col-"][class$="-12"] is what you want.

You are basically looking for a class which starts with 'col-' in first []. And which ends with '-12' in second [].

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

<div class='col-sm-12'>col-sm-12</div>
<div class='col-md-12'>col-md-12</div>
<div class='col-lg-12'>col-lg-12</div>


<div class='col-lg-6'>col-lg-6</div>
<div class='col-lg-8'>col-lg-8</div>

CSS selector wildcard inside class name

2 Answers2

Linked