CSS selector wildcard inside class name

[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>

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.

Tags:

Css

Css Selectors

Recent Posts