What Is CSS all: inherit and How Does It Work?

This article explores the CSS all: inherit declaration, detailing how it works, what it affects, and how it alters the standard cascade. You will learn how combining the all shorthand property with the inherit keyword forces an element to pull every applicable style rule directly from its parent element, effectively bypassing the default browser stylesheets and native non-inheritance behaviors.

The all Shorthand Property

The all property in CSS is a shorthand that resets all properties on an element at once, with the exception of direction, unicode-bidi, and CSS custom properties (variables). Instead of manually resetting properties like margin, padding, color, and background, all allows you to target almost the entire CSS property set with a single declaration.

Understanding the inherit Keyword

CSS properties generally fall into two categories:

1. Inherited properties: Properties like color, font-family, and line-height naturally pass down from parent elements to child elements.
2. Non-inherited properties: Properties like border, margin, padding, and background-color default to their initial values and do not pass down to children.

When you apply the inherit keyword to any individual property, it instructs the browser to retrieve the computed value of that specific property from the element's direct parent, even if the property is normally non-inherited.

How all: inherit Cascades Ancestral Rules Down

When you declare all: inherit; on an element, you eliminate the distinction between inherited and non-inherited properties for that element. The browser calculates the styles as follows:

1. Direct Parental Lookup: The browser checks the immediate parent of the target element.
2. Computed Value Inheritance: For every property governed by all, the child element takes the exact computed value assigned to the parent. If the parent has a background-color: rgb(255, 0, 0), padding: 20px, and display: flex, the child attempts to inherit these values directly.
3. The Ancestral Chain: The cascade flows down strictly through the DOM hierarchy. If the parent inherited its own values from an ancestor higher up the tree (such as the <body> or an outer wrapper), those values now cascade down to the target element. However, the target element only reads the state of its immediate parent, not distant ancestors directly.

.parent {
  background-color: lightgray;
  padding: 16px;
  border: 1px solid black;
}

.child {
  all: inherit;
}

In the example above, .child inherits the gray background, the 16px padding, and the black border from .parent, despite padding and border being non-inherited properties by default.

Important Caveats

• Layout Disruptions: Because all: inherit applies to layout properties like display, position, width, and height, it can cause severe rendering side effects if the child element is not designed to share the structural rules of its parent.
• Exceptions: Custom properties (--custom-variable), direction, and unicode-bidi are not altered by the all property.
• Specificity and Overrides: Any explicit property declared after all: inherit within the same rule set—or by a selector with higher specificity—will override the inherited value.