add new class to children container in html/css with javascripth

I’m a beginner in using javascript with html and css. I want to try is there a way to access child container class via parent container class. or can I add a new class(“second_new”) to “second” class via “first” class.

/* CSS */
.first {
  background-color: red;
}

.first_new {
  background-color: pink;
}

.second {
  background-color: blue;
}

.second_new {
  background-color: purple;
}

<!-- HTML -->
<div class="row">
  <div class="first">
      <h1>This is first class</h1>
      <div class="second"> <!-- I want to change this -->
          <h2>This is Second class</h2>
      </div>
  </div>
  <div class="first">
      <h1>This is first class</h1>
      <div class="second"> <!-- I want to change this -->
          <h2>This is Second class</h2>
      </div>
  </div>
  
</div>
<!-- JAVASCRIPT -->
<script>
    var firstClass = document.getElementsByClassName("first");

    function Mousein() {
        this.classList.add("first_new");

    };
    
    function Mouseout() {
        this.classList.remove("first_new");

    };

    for (var i = 0; i < firstClass.length; i++) {
        firstClass[i].addEventListener('mouseover', Mousein);
        firstClass[i].addEventListener('mouseout', Mouseout);

    }
</script>