Can You Prevent Child Elements from Inheriting Parent CSS Styles?

Preventing Child Elements from Inheriting Parent CSS

Original Inquiry

Can CSS be modified to prevent the inheritance of styles from parent elements to child elements?

Comprehensive Answer

Unfortunately, there is no straightforward CSS property that can prevent child elements from inheriting styles from their parents. The inherit property allows you to copy values from parent to child elements, but there is no equivalent for the opposite direction.

Alternative Solutions

To override the inherited styles, you must manually revert them in the CSS code:

div {
  color: green;
}

form div {
  color: red;
}

form div div.content {
  color: green;
}

Alternatively, if you have control over the markup, you can use additional classes to target specific elements:

form div.sub {
  color: red;
}

form div div.content {
  /* remains green */
}

Future Possibilities

The CSS Working Group is exploring a solution to this issue. The proposed property, revert, would allow you to reset inherited styles and revert to the element's own computed style:

div.content {
  all: revert;
}

As of March 2015, this property has been implemented in all major browsers except Safari and IE/Edge. However, the property name has since been changed to revert.

The above is the detailed content of Can You Prevent Child Elements from Inheriting Parent CSS Styles?. For more information, please follow other related articles on the PHP Chinese website!