How can you isolate a `div` container from public CSS styles and prevent its children from inheriting global styles?

Isolating a Div from Public CSS Styles

Problem

Consider the following HTML code:

<code class="html"><div id="mydiv">
  <img  src="an%20image%20source" alt="How can you isolate a `div` container from public CSS styles and prevent its children from inheriting global styles?" >
  <h1 id="Hi-it-s-test">Hi it's test</h1>
</div></code>

Applying the following CSS stylesheet:

<code class="css">img {
  width: 100px;
  height: 100px;
}
h1 {
  font-size: 26px;
  color: red;
}</code>

The question arises: how can we prevent the styling defined for all and

tags from affecting the elements within the #mydiv container?

Solution

To isolate the elements within #mydiv from the global CSS styles, we can leverage the all shorthand property and the unset keyword introduced in CSS Cascading and Inheritance Level 3.

By setting all: initial on #mydiv, we block inheritance for all properties and reset them to their default values. This prevents the global styles from cascading into the container.

To allow inheritance within #mydiv, we can set all: unset on its descendants. By doing so, we enable the rules defined within the container to take effect without interference from the external styles.

Here's the revised CSS code:

<code class="css">#mydiv {
  all: initial;
}
#mydiv * {
  all: unset;
}</code>

It's important to note that this technique applies to all possible CSS properties, including vendor-prefixed properties. To ensure broad browser support, it's recommended to target pseudo-elements as well:

<code class="css">#mydiv::before,
#mydiv::after,
#mydiv *::before,
#mydiv *::after {
  all: unset;
}</code>

Alternative Approach

Alternatively, for broader browser compatibility, you can manually set each CSS property to its initial value on #mydiv and to inherit on its descendants, as seen in the following code:

<code class="css">#mydiv {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}</code>

Browser Support

The all shorthand property is supported in the following browsers:

• Chrome 37
• Firefox 27
• Safari 9.1
• Edge 79
• Opera 24

For up-to-date browser support information, please refer to the official documentation.

The above is the detailed content of How can you isolate a `div` container from public CSS styles and prevent its children from inheriting global styles?. For more information, please follow other related articles on the PHP Chinese website!