How to refuse to inherit parent styles in CSS

How to Refuse to Inherit Parent Styles in CSS

In web development, we often encounter situations where we need to modify the styles of parent elements but do not want child elements to inherit these styles. In this case, we need to use some techniques to prevent child elements from inheriting their parent’s styles. This article will detail how to prevent child elements from inheriting their parent’s styles in CSS.

1. Using the inherit keyword

In CSS, we can use the inherit keyword to force the inheritance of a property value. If a property is set to inherit on a child element, the property value will be inherited from its parent element. For example, we have the following HTML structure:

<div class="parent">
<p class="child">Hello, World!</p>
</div>

We don’t want the p element to inherit the font size style of .parent. We can write CSS:

.parent {
font-size: 16px;
}

.child {
font-size: inherit; 
} 

By doing this, the p element will no longer inherit the font size style of .parent, but will instead inherit the default font size defined by it globally.

2. Using the unset Keyword

In addition to the inherit keyword, CSS also provides the unset keyword, which resets a property to its initial value. Suppose we want to disable the color attribute from being inherited by a child element. We can write the following: CSS:

.parent {
color: red;
}

.child {
color: unset;
}

This way, the text color of the p element will no longer inherit the red color style from .parent and will return to the default text color.

3. Use the initial keyword

In addition, CSS has an initial keyword, which resets a property to its initial value. If you use the initial keyword, the child element will no longer inherit the parent’s style. For example, if you want to disable the child element from inheriting the parent’s font-weight property, you can write CSS like this:

.parent {
font-weight: bold;
}

.child {
font-weight: initial;
}

This will cause the p element’s font weight to no longer inherit the bold property from .parent, returning it to the browser’s default font weight.

4. Using the !important Rule

In some cases, we may need to use the !important rule to override the style of the parent element. If the parent element’s style uses the !important rule, if the child element wants to refuse to inherit the parent element’s style, it needs to use the !important rule in the style declaration. For example, we have the following HTML structure:

<div class="parent"> 
<p class="child">Hello, World!</p> 
</div> 

If the parent element sets a font-size of 16px !important:

.parent { 
font-size: 16px !important; 
} 

Then the child element can refuse to inherit the parent element’s style in the following way:

.child { 
font-size: initial !important; 
}

This forces the child element to use its default font size instead of inheriting the parent’s style.

Summary

In CSS, we can use the inherit, unset, and initial keywords, as well as the !important rule, to prevent child elements from inheriting their parent’s style. Choosing the appropriate method for handling style inheritance based on the specific situation allows for greater flexibility in controlling web page styles. Hopefully, this article will help you better understand how to prevent child elements from inheriting their parent’s style, allowing you to apply these methods flexibly in your development.