CSS rule for grandchild irrespective of its parent element

Question

I have css rule as follows,

.wrapper > h3{
        color:red;
    }

The html code,

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

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

Here is the plunker. The Text1 is shown in red colour but Text2 is not. I understood that this rule will take the immediate <h3> element under .wrapper. In angularjs most of the time the elements will be wrapped under tag. So, I want to make a rule such that whenever an <h3> tag comes inside .wrapper class then it has to be in red colour. irrespective of <h3>'s parent elements. Is there a way to do it?

Answer 1

Simply make the rule:

.wrapper h3 { color: red; }

This will make all <h3> elements within the .wrapper class red

If you did want to target the grandchild element as your question title suggests you could use this rule:

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