Some of you may have arrived at this article thinking like the above.
I know what you can do with inherit, but sometimes it doesn’t work well when you actually use it.
- About inherit
- How to use inherit
- How to remove inherit
- When inherit doesn’t work
I will explain the above items.
By reading this article, you can understand the characteristics and usage of inherit to inherit the style of the parent element.
Whether you’re new to inherit or want to review how to use it, be sure to check it out!
Table of contents
- What is CSS inheritance
- How to use inherit
- How to uninherit with CSS
- What to do when inherit doesn’t work
- summary
What is CSS inheritance
There are two types of CSS: styles that are inherited from parent elements to child elements and styles that are not inherited.
CSS inherit has the role of inheriting the style of the parent element, and by using it, you can force inheritance of the style that is not inherited.
The types of CSS inheritance are as follows.
style inherited
- font size
- Letter color
- character thickness
styles not inherited
- border
- padding
- margin
- background image
Font size, font color, etc. are inherited from the parent element by default. Border and padding are not inherited from the parent element, but using inherit allows them to be inherited.
How to use inherit
The input method of inherit is specified as the value of the property to be inherited as shown below .
Specific usage is explained using sample code.
sample code
HTML
<body>
<div class="test">
<p>テスト</p>
</div>
</body>CSS
.test{
padding:30px;
margin:50px;
font-size: 30px;
font-weight: bold;
}
.test p{
padding:inherit;
}In the above code, inherit is specified for padding, which is a style that is not inherited by default, and the code forcibly inherits the padding of the parent element.
Execution result
How to uninherit with CSS
To remove inherit, use the value unset.
Unset has the role of resetting the value of the property, and if inherited from the parent by default, it will be displayed as it is, and the inherited value will be set to the initial value.
For example, to remove “padding:inherit;”, enter:
セレクタ{
padding:inherit;
padding:unset;
}Since source code is executed from top to bottom, unset should be specified after inherit.
What to do when inherit doesn’t work
If inherit does not work, check if the following items apply.
- Not working due to typos
- unset is specified after inherit
- Trying to inherit the width specified by the % value in the table tag
First, check if CSS other than inherit is reflected. If it is not reflected, it may be caused by typos in CSS selectors or HTML tags.
If only the value specified with inherit doesn’t work, check the specified property and selector for typos.
In addition, if unset is specified for the property for which inherit is specified, it will not work. Let’s check again what kind of value is entered in the property for which inherit is specified.
Table tags and elements with “display:table-cell;” are not reflected even if width is specified with a % value. Let’s check whether the table element is trying to inherit the width specified by the % value.
summary
This time, I explained how to inherit the style of the parent element with CSS inherit. How was it?
inherit is a type of value specified for a CSS property, and can inherit the style of the parent element.
Also, when canceling the inherited value by inherit, you can return to the initial value by using the value unset.
