I have a div and I would like to create another div inside it with a different class, ensuring that the inner div is completely independent from the CSS settings of the outer div.
Here is an example:
<div class="outer">
<div><h1> h1 </h1><div>
<div class="inner">
<h2> h2 </h2>
</div>
<h2> h2 </h2>
</div>
.outer h1{ color:blue; }
.outer h2{ color:red; }
.inner { height: 111px; }
My goal is to remove the red color specifically from the h2 within the "inner" div.
It may appear simple to just override the color to black, but what if there are numerous other CSS properties or if they are dynamic.
Edit: It seems there is some confusion, but what I actually need is somewhat contrary to the responses received so far. I have a main container div with extensive CSS settings. Now, I wish to add a div inside the main container without inheriting any of its CSS properties.