How to Override One CSS Class with Another
![Back view of modern programmer sitting and writing code in dark room-Sep-13-2022-08-57-06-65-AM](https://www.netguru.com/hs-fs/hubfs/Back%20view%20of%20modern%20programmer%20sitting%20and%20writing%20code%20in%20dark%20room-Sep-13-2022-08-57-06-65-AM.jpeg?width=1000&height=667&name=Back%20view%20of%20modern%20programmer%20sitting%20and%20writing%20code%20in%20dark%20room-Sep-13-2022-08-57-06-65-AM.jpeg)
Here's how to do it. Firstly, check which class overrides it.
Let's say your markup returns:
<div class="range-specific range"></div>
If your CSS is defined like that:
.range-specific { foo; }
.range { bar; }
... the range will win.
If you change it to:
.range-specific.range { foo; }
.range { bar; }
... the specific will win.
If you want to hack it even more, do this:
.range-specific.range-specific { foo; }
.range { bar; }
... and specific will surely win.
It's even better to do this:
.range { bar; }
.range-specific { foo; }