All Case Studies Design Development Interviews Machine Learning Project Management

How to Override One CSS Class with Another

If you want to add a custom style to an object that already has its style defined by other css class, you may 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; }

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

digital transformation
remote work best practices
Read also
Need a successful project?
Estimate project or contact us