How to apply CSS to only immediate children of a certain class

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.

.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