CODEWITHSUNDEEP
csscss-specificity
Zibron
Zibron

Reputation: 25

Override SASS class

I want to define a style for components I use to filter a list. I made a class to select all of them, and then I want to override some of the selected classes. Some code being worth a thousand words :

div[class*="filter-"] {
      (some property)
}

.filter-specific {
   (do something more specific)
}

But for some reason it doesn't work. I though that the order of definition was important but it doesn't appear to be the case. And I can't put !important everywhere. So what am I doing wrong ?

Upvotes: 1

Views: 1660

Answers (1)

Vucko
Vucko

Reputation: 20844

That's because CSS specificity.

div[class*="filter-"] has better specificity (div + [class*="filter-"]) then .filter-specific.

You can test it with this CSS Specificity calculator.

If .filter-specific will always be a div, then you can use it like:

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

div.filter-specific {
  color: blue;
}
<div class="filter-foo">bar</div>
<div class="filter-specific">spec</div>

Reference: MDN CSS Specificity

Upvotes: 1

Related Questions