Как применить 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 в "inner" div

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

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

Ответ 1

.outer > h2 { color:red; }

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

Ответ 2

Я думаю, что вам нужно

.inner h2 {color: inherit}

Ответ 3

.outer .inner * { color: #000; }

устанавливает все элементы внутри внутреннего контейнера как имеющие черный цвет.

Демо здесь