Sass – Class name wildcard

In CSS you can use the attribute selector with ^:

div[class^="div-"] ==> Selects all div with a class attribute value starting with “div-“

Example:

div {
  height: 20px;
  margin-bottom: 5px;
  border: 1px solid black;
}

div[class^="div-"] {
  border-color: red;
}

<div class="div-one"></div>
<div class="div-two"></div>
<div class="other"></div>
<div class="div-three"></div>

Update

As @FreePender says, if the CSS class isn’t the one in the attribute’s value, it doesn’t work. Another solution is to use the attribute selector with *:

div[class*="div-"] ==> Selects all div with a class attribute value containing “div-“.

This way it would also match a CSS class named nodiv-one for example, but it’s not something that happens normally.

div {
  height: 20px;
  margin-bottom: 5px;
  border: 1px solid black;
}

div[class*="div-"] {
  border-color: red;
}

<div class="div-one"></div>
<div class="div-two"></div>
<div class="other"></div>
<div class="myclass div-three"></div>