Question: I am trying to do this: 

when clicked on fruitSort container show the origin element (every third div of the fruitSort container, for now in red ), and I want to do this for all fruitSort containers, if user clicks fruitSort, show fruitOrigin.

(for obvious reasons I don't hide fruitOrigin yet )

I can't seem to find out how to target these nth-children properly in javascript. 

I want to learn pure javascript so please no Jquery. 
thanks a lot.

```js
var fruit = document.getElementsByClassName('fruitSort');
    for(var i = 0; i < fruit.length; i++) {
      fruit[i].addEventListener("click", showOrigin, false);
   }

    function showOrigin() {
    console.log("clicked");
    // show every fruitSort div:nth-child(3)

    }
```

```css
.fruitSort {padding:15px; border:1px solid grey;}
.fruitSort div:nth-child(3) {color:tomato;}
```

```html
<div class="fruits">

  <!-- NB! No ID's present, only classes 
  so adding an id to .fruitOrigin is not an option -->

  <div class="fruitSort">  
    <div>1</div>
    <div>Banana</div>
    <div>Latin America</div>
  </div>

  <div class="fruitSort">
    <div>2</div>
    <div>Apple</div>
    <div>The Netherlands</div>
  </div>

  <div class="fruitSort">
    <div>3</div>
    <div>Kiwi</div>
    <div>New Zealand</div>
  </div>

</div>
```

Answer: 
You can use the document.querySelectorAll, it's basically a selector that you can select using CSS selectors..

```js
var fruit = document.getElementsByClassName('fruitSort');
    for(var i = 0; i < fruit.length; i++) {
      fruit[i].addEventListener("click", showAll, false);
   }

    function showAll(el) {
    //console.log("clicked");
    // show every fruitSort div:nth-child(3)
      console.log("this = " + this.querySelector(".fruitOrigin").innerText);
      var found = document.querySelectorAll(".fruitSort div:nth-child(3)");
      for (var x of found) console.log(x.innerText);
    }
```

```css
.fruitSort {padding:15px; border:1px solid grey;}
.fruitSort div:nth-child(3) {color:tomato;}
```

```html
<div class="fruits">

  <!-- NB! No ID's present, only classes 
  so adding an id to .fruitOrigin is not an option -->

  <div class="fruitSort">  
    <div class="fruitID">1</div>
    <div class="fruitName">Banana</div>
    <div class="fruitOrigin">Latin America</div>
  </div>

  <div class="fruitSort">
    <div class="fruitID">2</div>
    <div class="fruitName">Apple</div>
    <div class="fruitOrigin">The Netherlands</div>
  </div>

  <div class="fruitSort">
    <div class="fruitID">3</div>
    <div class="fruitName">Kiwi</div>
    <div class="fruitOrigin">New Zealand</div>
  </div>

</div>
```
You can find children with class `fruitOrigin` and show them:

```js
var handler = function() {
    var origins = this.getElementsByClassName('fruitOrigin')
    for (var i = 0; i < origins.length; i++) {
        origins[i].style.display = 'block';
    }  
}
var fruit = document.getElementsByClassName('fruitSort');
for (var i = 0; i < fruit.length; i++) {
    fruit[i].addEventListener('click', handler, false);
}
```

```css
.fruitSort {padding:15px; border:1px solid grey;}
.fruitSort div:nth-child(3) {color:tomato;}
.fruitOrigin {display:none;}
```

```html
<div class="fruits">

  <!-- NB! No ID's present, only classes 
  so adding an id to .fruitOrigin is not an option -->

  <div class="fruitSort">  
    <div class="fruitID">1</div>
    <div class="fruitName">Banana</div>
    <div class="fruitOrigin">Latin America</div>
  </div>

  <div class="fruitSort">
    <div class="fruitID">2</div>
    <div class="fruitName">Apple</div>
    <div class="fruitOrigin">The Netherlands</div>
  </div>

  <div class="fruitSort">
    <div class="fruitID">3</div>
    <div class="fruitName">Kiwi</div>
    <div class="fruitOrigin">New Zealand</div>
  </div>

</div>
```