ＨＴＭＬでタグで囲む方法とクラスを追加する時の違い

初めまして。HTMLに関する質問です。最初に、子タグ４つをコード１のようにchildrenというタグで囲んでいたのですが、ｃｓｓが効かずうまくいきませんでした。コード２のように子タグ４つの前にクラスを追加する形をとったら全てが上手くいったのですが、コード１でなぜｃｓｓが効かなかったのかを教えていただきたいです。調べても出てこなかったのでどうかよろしくお願いします。一応ｃｓｓも載せておきます。

code1
  <div class="parents">
    <div class="children">
      <div class="left">
      <div class="child1">Child1</div>
      <div class="child2">Child2</div>
      </div>
      <div class="right">
      <div class="child3">Child3</div>
      <div class="child4">Child4</div>
      </div>
    </div>
  </div>

code2

　　<div class="parents">
      <div class="left">
      <div class="children child1">Child1</div>
      <div class="children child2">Child2</div>
      </div>
      <div class="right">
      <div class="children child3">Child3</div>
      <div class="children child4">Child4</div>
      </div>
    
   </div>
css
body {
  margin: 0 auto;
}

.parents {
  height: 200px;
  width: 980px;
  padding: 0 20px;
  background-color: #f6f5f4;
  overflow: hidden;
  box-sizing: border-box;
}

.children {
  float: left;
  position: relative;
  top: 50px;
  height: 100px;
  width: 100px;
  margin-right: 10px;
}

.left {
  float: left;
}

.child1 {
  background-color: #ff9abc;
}

.child2 {
  background-color: #f9b9ff;
}

.right {
  float: right;
}

.child3 {
  background-color: #cbb8ff;
}

.child4 {
  background-color: #acb5ff;
}