title: nth-of-type inside a div not working
body: <p>I'm trying to select the first <code>&lt;h6&gt;</code> element inside the <code>#user-attributes</code> div with this css selector:</p>
  
  <pre><code>this.country = fixture.debugElement
                 .query(By.css('div#user-attributes h6:nth-of-type(1) ')).nativeElement;
  </code></pre>
  
  <p>But it isn't working. Why not?</p>
  
  <p>I need to then select say the 3rd and 4th <code>&lt;h6&gt;</code> inside the <code>#user-attributes</code> div so I'm using <code>:nth-of-type</code>.</p>
  
  <p>Don't worry about the jasmine syntax, that's just how jasmine gets html elements with css. </p>
  
  <p>My html:</p>
  
  <pre><code>&lt;div _ngcontent-cvy-35="" class="card-noshadow" id="user-attributes"&gt;
      &lt;div _ngcontent-cvy-35="" class="row"&gt;
          &lt;div _ngcontent-cvy-35="" class="col-xs-12"&gt;
              &lt;img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/maps-green.png"&gt;
              &lt;h6 _ngcontent-cvy-35=""&gt;New Zealand&lt;/h6&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div _ngcontent-cvy-35="" class="row"&gt;
          &lt;div _ngcontent-cvy-35="" class="col-xs-12"&gt;
              &lt;img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/refresh.png"&gt;
              &lt;h6 _ngcontent-cvy-35=""&gt;member since Mon Oct 13 2014 00:00:00 GMT+1300 (NZDT)&lt;/h6&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div _ngcontent-cvy-35="" class="row"&gt;
          &lt;div _ngcontent-cvy-35="" class="col-xs-12"&gt;
              &lt;img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/clock.png"&gt;
              &lt;h6 _ngcontent-cvy-35=""&gt;last seen Thu Oct 13 2016 11:13:00 GMT+1300 (NZDT)&lt;/h6&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div _ngcontent-cvy-35="" class="row"&gt;
          &lt;div _ngcontent-cvy-35="" class="col-xs-12"&gt;
              &lt;img _ngcontent-cvy-35="" class="pull-xs-left icon" src="images/badge.png"&gt;
              &lt;!--template bindings={
    "ng-reflect-ng-for-of": "active User,helper"
  }--&gt;&lt;div _ngcontent-cvy-35="" id="badges"&gt;
                  &lt;div _ngcontent-cvy-35="" class="badge"&gt;
                      active User
                  &lt;/div&gt;
              &lt;/div&gt;&lt;div _ngcontent-cvy-35="" id="badges"&gt;
                  &lt;div _ngcontent-cvy-35="" class="badge"&gt;
                      helper
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>