Search code examples
csscss-specificity

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 ?

Solution

  • 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