I have a div
and in that div
I want to create another div
with a different class and have the inner div
completely separated from the outer div
CSS settings.
Like this:
<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; }
What I want is to unset the red color from the h2
in the "inner" div
It might seem stupid not to just overweight the color to black here, but what if I have a lot more arguments in the CSS or even if it's dynamic.
Edit: I guess it isn't clear, but what I need is actually kind of the opposite of the answers I got so far. I have a main-container div and it has alot of settings in the CSS. Now I want to insert a div into the main-container without it having any of the main-container CSS settings.
The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.
To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.)
.outer > h2 { color:red; }
this way only the direct child of the outer div get this color value, should fix the job.
.outer .inner * { color: #000; }
sets all elements within the inner container as having the color black.
Demo here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With