How to Override One CSS Class with Another

Zuzanna Stolińska

May 11, 2016 • 1 min read

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

Related topics

More posts by this author

Zuzanna Stolińska

At first, Zuzanna dreamed about becoming a music star so she learned how to play the guitar....
codestories