nth-child(20

I can't pick out the 2nd child.

HTML

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="rules">
    <div>
      <label for="rule1">Rule1</label>
      <input id="rule1">
    </div>
    <div>
      <label for="rule2">Rule2</label>
      <input id="rule2">
    </div>
    <div>
      <label for="rule3">Rule3</label>
      <input id="rule3">
    </div>
  </div>
</body>
</html>

CSS

.arule {
  background-color: yellow;
}
.brule {
  background-color: red;
}
.crule {
  background-color: blue;
}

JavaScript

var one   = document.querySelector('div.rules div:nth-child(1)');
var two   = document.querySelector('div.rules div:nth-child(2)');
var three = document.querySelector('div.rules div:nth-child(3)');
one.classList.add('arule');
two.classList.add('brule');
three.classList.add('crule');