Как применить CSS только к непосредственным потомкам определенного класса

У меня есть div , и в этом div я хочу создать еще один div с это другой класс, а внутренний div полностью отделен от внешнего div настроек CSS.

Вот так:

<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; }

Я хочу отключить красный цвет из h2 в "внутреннем" div

Может показаться глупым не просто перегрузить цвет, чтобы здесь черный, но что, если у меня гораздо больше аргументов в CSS или даже если он динамический.

Редактировать: Думаю, это неясно, но то, что мне нужно, на самом деле является своего рода противоположностью тем ответам, которые я получил до сих пор. У меня есть div основного контейнера, и у него много настроек в CSS. Теперь я хочу вставить div в основной контейнер без каких-либо настроек CSS основного контейнера.