<div id="owner">
  <!-- ...other parent elements -->
    <div class="parent one">                <!-- parent lvl 1 -->
      <div class="child one">               <!-- child lvl 1 -->
        <!-- ...other parent elements -->
          <div class="parent two">            <!-- parent lvl 2 -->
            <div class="child two"></div>     <!-- child lvl 2 -->
            <div class="child two"></div>
            <div class="child two"></div>
          </div>
      </div>
      <div class="child one"></div> 
      <div class="child one"></div> 
      <div class="child one"></div> 
    </div>
</div>

var el = document.getElementById("owner");
el && el.querySelectorAll('.parent .child');

Important: class name "one" and "two" is only for visual purposes - it does not exist.

In result we will get 7 times div.child nodes. How to create selector that only selects children from the "first lvl" (we end up with 4 x div.child.one).

Important: this is simple example but in real on we do not know how deep div.parent.one is in div#owner and the same applies to div.parent.two

Maybe it is possible with ExtJS ?

var el = Ext.get('#owner');
el.down('.parent .child');     //does not work, returns all elements as above

JSFiddle

<div id="owner">
  <!-- ...other parent elements -->
    <div class="parent one">                <!-- parent lvl 1 -->
      <div class="child one">               <!-- child lvl 1 -->
        <!-- ...other parent elements -->
          <div class="parent two">            <!-- parent lvl 2 -->
            <div class="child two"></div>     <!-- child lvl 2 -->
            <div class="child two"></div>
            <div class="child two"></div>
          </div>
      </div>
      <div class="child one"></div> 
      <div class="child one"></div> 
      <div class="child one"></div> 
    </div>
</div>

var el = document.getElementById("owner");
el && el.querySelectorAll('.parent .child');

Important: class name "one" and "two" is only for visual purposes - it does not exist.

In result we will get 7 times div.child nodes. How to create selector that only selects children from the "first lvl" (we end up with 4 x div.child.one).

Important: this is simple example but in real on we do not know how deep div.parent.one is in div#owner and the same applies to div.parent.two

Maybe it is possible with ExtJS ?

var el = Ext.get('#owner');
el.down('.parent .child');     //does not work, returns all elements as above

JSFiddle

• javascript
• css
• extjs

• What is expected result? Are you trying to select only first .child parent element that is child of #owner .parent? – guest271314 Commented Oct 5, 2016 at 6:13
• Expected result is in ments: 4 x div.child.one (four divs children of div.parent.one) – kkris1983 Commented Oct 5, 2016 at 9:32
• Do you mean without including the children, that is <div class="parent two"> <!-- parent lvl 2 --> <div class="child two"></div> <!-- child lvl 2 --> <div class="child two"></div> <div class="child two"></div> </div> within resulting collection? – guest271314 Commented Oct 5, 2016 at 23:20
• Can you include expected html result returned by selection at Question? – guest271314 Commented Oct 5, 2016 at 23:33

3 Answers 3

You can use this:

#owner > .parent  > .child

With the > you can specify the direct children from the parent element.

@kkris1983 This CSS selector will only apply to .child that is not nested in other .child

.child:not(.child .child)

For your more plicated case with .parent:

.parent>.child:not(.parent>.child .parent>.child)

This way you can make a selector only for the first occurrence of descendants. Works for any level of nesting and intermediate tags. https://codepen.io/doc_ss/pen/xxyYMaP

var children = document.querySelectorAll('.child:not(.child .child)');
document.getElementById('count').innerHTML = "The number of descendants of only the first level found: "+children.length;
    

#owner .parent > .child {
  background: blue;
}
#owner .child:not(.child .child) {
  background: red;
}

<div id="owner">
  <!-- ...other parent elements -->
    <div class="parent one">                <!-- parent lvl 1 -->
      <div class="child one">1               <!-- child lvl 1 -->
        <!-- ...some other  elements -->
          <div class="parent two">            <!-- parent lvl 2 -->
            <div class="child two">1.1</div>     <!-- child lvl 2 -->
            <div class="child two">1.2</div>
            <div class="child two">1.3</div>
          </div>
      </div>
      <div class="child one">2</div> 
      <div class="child one">3</div> 
      <div class="child one">4</div> 
    </div>
  <div id="count"></div>
</div>

Try this. you used outerdiv name also parent change the outer div name

var el = document.getElementById("owner");

parent = document.querySelector('.parents');
children = parent.children;
console.info(children);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="owner">
  <div class="parents one">                <!-- parent lvl 1 -->
    <div class="child one">               <!-- child lvl 1 -->
      <div class="parent two">            <!-- parent lvl 2 -->
        <div class="child two"></div>     <!-- child lvl 2 -->
        <div class="child two"></div>
        <div class="child two"></div>
      </div>
    </div>
    <div class="child one"></div> 
    <div class="child one"></div> 
    <div class="child one"></div> 
  </div>
</div>