By.css predicate limitation

all. I have the next code generated by Highcharts chart component

  <div id="root0" ng-version="4.0.0">
      <chart class="donut" ng-reflect-options="[object Object]" data-highcharts-chart="0">
          <div class="highcharts-container" id="highcharts-0" style="position: relative; overflow: hidden; width: 95px; height: 95px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
              <svg version="1.1" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://ift.tt/nvqhV5" width="95" height="95">
                  <desc>Created with Highstock 4.2.7</desc>
                  ...
              </svg>
          </div>
      </chart>
  </div>

Now I want to test that some parts exist.

The simple debugElement.query(By.css('.highcharts-container')) returns nothing. At the same time the debugElement.nativeElement.querySelector('.highcharts-container') returns desired element.

How is this possible? Does By.css have some limitations?