Let's take a look at the pen in the last article here. We notice that we set the font-family property to the Google Font we imported in our stylesheet, and we set it using the * (Asterix) selector, which basically selects all elements in our stylesheet. What would happen if instead of the * selector, we would use the <body> selector?
Let's look at the result:
body {
font-family: Lato; /* this is a property that will be applied to all the child elements in the DOM */
}
Nothing changes! Although the procedure in which the font-family property is applied to the document is different when using * and body, we notice something more interesting. All of our ancestor elements within the <body> will inherit this font; there is no need to apply it explicitly to each child element inside our stylesheet.
The image below shows how properties are passed down through the DOM to their child elements.
An important notion to keep in mind though is that not all properties can be inherited. Some of the most common properties that can be inheritable are color, font, font-family, font-size, font-weight, line-height, letter-spacing, text-align, white-space, and more text-related properties. List properties also inherit, and some of the most common inheritable list properties are list-style, list-style-type, list-style-position, and list-style-image. You can see a full list here
Using the special values
Inheritance can be manipulated further using two special values: initial and inherit.
Inherit can force inheritance in places where the cascade is preventing it. This will cause the element to inherit any value from the parent element. How we can test this? If you remember we set the text color of our anchor to be black, and we removed the underline which is the original style. What if we move those two rulesets to the parent element (#main-list). We will break our styles!
#main-list {
list-style: none;
display: flex;
color: black; /* we moved these two lines here */
text-decoration: none;
}
#main-list a {
/*color: black;
text-decoration: none; */
background-color: pink;
padding: 20px;
margin: 10px;
display: inline-block;
text-align: center;
border-radius: 6px;
}
In order to inherit the rulesets for color and text-decoration from our parent element, we will use the value of inherit for both properties. This is beneficial because now we can edit the parent ruleset (for example using JavaScript) and the anchor should apply these newly changed rules. We can also use the inherit keyword to force the inheritance of a property which is not normally inherited, such as border or padding. With the changes below the script should look as before (having black text and no underline decoration):
#main-list a {
color: inherit;
text-decoration: inherit;
background-color: pink;
padding: 20px;
margin: 10px;
display: inline-block;
text-align: center;
border-radius: 6px;
}
Initial keyword on the other hand is used when we already have styles applied that we want to undo. Every CSS property by default, has an initial value, and by using the initial keyword we actually reset the rule to that default value. (a warning if you want to use initial in your styles though, it is not supported in IE or Opera Mini).
In the listing below we have the CSS in which the color has been set to red inside the anchor, but inside the rare class we set the color to initial. Because the color property is by default black (color: black) , the rare element will be black.
#main-list a {
color: red;
text-decoration: inherit;
background-color: pink;
padding: 20px;
margin: 10px;
display: inline-block;
text-align: center;
border-radius: 6px;
}
#main-list .rare {
background-color: salmon;
color: initial;
}
And that is it regarding inheritance. As you probably noticed the concept is tightly coupled with the idea behind cascades and as a matter of fact many starters kinda mix these two concepts up! Hope that this article cleared a bit of the fog regarding inheritance and cascades!
The result
Here we have our codepen for this article:
If you liked this article maybe you'll like more stuff on thedukh.com.
Top comments (0)