I have this HTML structure:

<tabset data-test-id="main-tabset">
  <tab data-test-id="general">
    <tabset data-test-id="lang-tabset">
      <tab data-test-id="lang-1">
        ...
      </tab>
      <tab data-test-id="lang-2">
        ...
      </tab>
  </tab>
  <tab data-test-id="settings">
    ...
  </tab>
</tabset>

I want to select only directtab children of [data-test-id="main-tabset"].

I tried this:

debugElement.queryAll(By.css(`[data-test-id="main-tabset"] > tab`))

But this isn't works for me. The result contains all children tab elements.

How can I query only direct children?