inherit is a CSS keyword value that forces a property to use the computed value of its parent element. It is useful when a property normally does not inherit automatically. section 10.3.1
Use inherit when a component should take a visual value from its parent:
- Set font-family: inherit and color: inherit on form inputs so their text matches the surrounding application. section 10.3.1
- Pass a background color through nested menu elements when background-color is not inherited by default. section 11.5.5
- Pass border-radius through the menu and menu-item while preserving the link’s own border-radius: 50% shape. section 11.5.5
Styling inputs
A form can make text and email inputs match the rest of the interface with font-family: inherit and color: inherit. The same rule increases the font size to 1rem for a more usable form.
Passing a share button’s theme
If a share link’s great-grandparent controls the background color, set background: inherit on the menu item, menu, and link. Set border-radius: inherit on the menu and menu item, but keep border-radius: 50% on the link to retain its circular shape.
Listing 11.9 Inheriting property values
.share__menu-item {
list-style: none;
background: inherit;
border-radius: inherit;
}
.share__menu {
display: flex; #1
margin: 0;
padding: 0;
background: inherit;
border-radius: inherit;
}
.share__link:hover,
.share__link:focus-visible {
border-color: black;
outline: none;
transform: scale(1.25);
background: inherit;
}
Inspect the complete CSS pattern for passing background and border-radius values through the share-link component. section 11.5.5
