CSS: Inherit

In CSS, the inherit keyword is used to explicitly specify that a property should take the same computed value as the property of its parent element. This can be useful for maintaining consistency across elements, especially when dealing with nested elements that should share certain style properties.

Basic Usage

The inherit keyword can be applied to any CSS property. When used, the element will inherit the value of that property from its parent element.

Example

/* Parent element */
.parent {
    color: blue;
    font-size: 20px;
}

/* Child element */
.child {
    color: inherit; /* This will be blue, same as the parent */
    font-size: inherit; /* This will be 20px, same as the parent */
}

When to Use inherit

1. Consistency in Nested Elements: When you want child elements to maintain the same style as their parent.
2. Overriding Default Styles: To ensure specific elements follow a consistent style that is derived from their parent, overriding any other styles that might be applied.

Practical Examples

Inheriting Font Properties

Suppose you want all text within a specific section to have the same font properties.

/* Section with a specific font style */
.section {
    font-family: 'Arial, sans-serif';
    font-size: 16px;
    color: #333;
}

/* Paragraphs within the section */
.section p {
    font-family: inherit; /* Inherit font-family from section */
    font-size: inherit;   /* Inherit font-size from section */
    color: inherit;       /* Inherit color from section */
}

Inheriting Visibility

You can use inherit to control the visibility of nested elements based on the parent’s visibility.

/* Hide the parent element */
.hidden {
    visibility: hidden;
}

/* Ensure the child also inherits the visibility */
.hidden .child {
    visibility: inherit; /* Will also be hidden */
}

Combining inherit with Other Values

You can combine inherit with other values using shorthand properties.

Example

/* Parent element with border */
.parent {
    border: 5px solid red;
}

/* Child element inheriting border properties */
.child {
    border-width: inherit; /* Inherits 5px from parent */
    border-style: inherit; /* Inherits solid from parent */
    border-color: blue;    /* Overrides color to blue */
}

Caveats

• Not Always Useful: In some cases, using inherit might not provide the desired effect, especially if the parent’s properties are not what you intend to use for the child.
• Specificity and Cascade: Be mindful of the CSS cascade and specificity. Inherited properties can be overridden by more specific rules or inline styles.

Alternative Keywords

• initial: Resets the property to its default value.
• unset: Resets the property to its inherited value if it inherits by default, otherwise to its initial value.
• revert: Resets the property to the value established by the user-agent stylesheet or by user styles, ignoring any styles in author stylesheets.

Example with Alternative Keywords

/* Initial example */
.element {
    color: initial; /* Resets color to default value */
}

/* Unset example */
.element {
    color: unset; /* Acts like inherit if inheritable, otherwise like initial */
}

/* Revert example */
.element {
    color: revert; /* Resets to the user-agent or user-defined value */
}

Conclusion

The inherit keyword is a powerful tool in CSS for ensuring that child elements maintain consistency with their parent elements. It helps in creating a predictable and manageable style hierarchy, especially in complex layouts. Understanding when and how to use inherit can greatly improve the maintainability and readability of your CSS code.