CSS inherit Keyword

CSS inherit keyword applies computed value of the property from its parent element.

CSS inherit keyword applied to any CSS property. The inherit keyword can be used for reinforces the default behavior, and override another rule.

Usages

The following table outline the usages and version history of inherit keyword.

Applies to: all elements
Version: CSS2
JavaScript Syntax: object.style.property = "inherit"

Syntax

Here is a syntax for the CSS inherit keyword

property: inherit;

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS inherit Keyword</title>
  <style>
    span {
      color: red;
    }
    p {
      color: blue;
    }
    p span {
      color: inherit;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <p>
    This is a paragraph text. <span>This text color is inherit from its parent.</span> This is a paragraph text.
  </p>

  <span>This is a span element</span>
</body>
</html>

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 8+
  • Opera 4+
  • Safari 1+

Note: The inherit keyword is not supported in IE7 and earlier version.

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.