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