Правило CSS для внука независимо от его родительского элемента

Question

У меня есть правило CSS следующим образом,

.wrapper > h3{
        color:red;
    }

HTML-код,

<div class='wrapper'>
      <h3>Text1</h3>
    </div>

    <div class='wrapper'>
      <div data-ui-view=''>
          <h3>Text2</h3>        
      </div>      
    </div>

Вот плункер. Text1 отображается красным цветом, но Text2 не является. Я понял, что это правило примет немедленное <h3> элемент под .wrapper, В angularjs большую часть времени элементы будут заключены в тег. Итак, я хочу сделать такое правило, чтобы всякий раз, когда <h3> тег приходит внутрь .wrapper тогда класс должен быть красного цвета. независимо от <h3>Родительские элементы. Есть ли способ сделать это?

Answer 1

Просто сделайте правило:

.wrapper h3 { color: red; }

Это сделает все <h3> элементы внутри .wrapper красный класс

Если вы хотите нацелиться на элемент внука, как подсказывает заголовок вашего вопроса, вы можете использовать это правило:

.wrapper > * > h3 { color: red; }