All Case Studies Design Development Interviews Our Way Project Management

How To Override One CSS Class With Another

If you want to add custom style to an object that already has it's style defined by other css class, sometimes you will have to replace some styles. 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; }

Then the range will win.


If you change it to:

.range-specific.range { foo; }
.range { bar; }

Then 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; }

Follow Netguru
Join our Newsletter

Read also
Need a successful project?
Estimate project or contact us