Add new class to children container in HTML/CSS with Javascript

user_16758550 0
Viewed 170

I'm a beginner in 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>

css html javascript
4 Answers

yes you can

Method 1

document.querySelector('.first .second');

Medthod 2

let parent = document.querySelector('.first');
parent.querySelector('.second');
user_180013010

Thanks Guys I found the answer this

/* 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");
    var child;

    function Mousein() {
        this.classList.add("first_new");
        child = this.querySelector(".second");
        child.classList.add("second_new")

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

    };

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

    }
</script>

user_167585500

Yes you can access bey selector. document.querySelector('parent child') . In your case would be: const childEl = document.querySelector('.first .second');

user_148071110

You can use getElementsByTagName() on any type of element. This would be

var parents = document.getElementsByClassName('parent');
var child = [];

for (let i = 0; i < parents.length; i++) {
  var child = parents.getElementsByTagName('div')[0];
  children.push(child);
}

Or, Even Simpler:

var parents = document.querySelectorAll('.parent');
var children = document.querySelectorAll('.parent > div');

Note: Elements selected by querySelectorAll() are like arrays and array methods can be applied. Note: To select one element use querySelector() method.

user_180139840
Related