Inheriting in CSS is a powerful feature, where child elements inherit the styles of their parent elements. However, it may create some unwanted results when you want an element to have a different style than its parent. In this blog post, we’ll show you how to stop CSS from inheriting and how to override inherited styles.
Preventing Inheritance
While there’s no direct way to stop CSS from inheriting, you can achieve it by resetting or setting a new value for the property you don’t want to inherit. Let’s say we have a parent div with a class .parent and a child div with a class .child:
<div class="parent">
<div class="child"></div>
</div>
And our CSS:
.parent {
font-size: 24px;
}
All elements inside the .parent div will inherit the font-size of 24px. To stop the child element from inheriting, you can either set the child element’s font-size to a specific value or reset it to the browser’s default:
.child {
font-size: 16px; /* or */
font-size: 1rem; /* or */
font-size: initial;
}
Using !important
In some cases, you might need to force a style to override inherited styles. One way to do this is by using the !important keyword. However, it’s crucial to use it sparingly, as it can make your CSS harder to maintain and debug:
.child {
font-size: 16px !important;
}
Using a More Specific Selector
Another way to override inheritance is by using a more specific selector. In CSS, the more specific a selector is, the higher priority it will have. For example:
.parent div {
font-size: 16px;
}
In this example, the child div will have a font-size of 16px due to the more specific selector.
Conclusion
Preventing inheritance in CSS can be achieved by resetting or setting a new value for the property you don’t want to inherit. Additionally, you can use the !important keyword or more specific selectors to override inherited styles. Keep in mind that using !important should be done sparingly, and it’s often better to rely on more specific selectors when possible.
