(String: {%- set hs_blog_post_body -%} {%- set in_blog_post_body = true -%} <span id="hs_cos_wrapper_post_body" class="hs_cos_wrapper hs_cos_wrapper_meta_field hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="meta_field" data-hs-cos-type="rich_text"> <div class="blog-post__lead h2"> <p>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.</p> </div></span>)

How to Override One CSS Class with Another

Photo of Zuzanna Stolińska

Zuzanna Stolińska

Updated Sep 28, 2023 • 2 min read
Back view of modern programmer sitting and writing code in dark room-Sep-13-2022-08-57-06-65-AM

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; }
Photo of Zuzanna Stolińska

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....
How to build products fast?  We've just answered the question in our Digital Acceleration Editorial  Sign up to get access

We're Netguru!

At Netguru we specialize in designing, building, shipping and scaling beautiful, usable products with blazing-fast efficiency
Let's talk business!

Trusted by: