2

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>
Ahmad Habib
  • 2,053
  • 1
  • 13
  • 28
Copernove
  • 33
  • 8
  • Are you asking for a way to select these elements in a CSS rule for formatting purposes (then make use of `:first-child`/`:last-child` or `:nth-child`), or do you _need_ to access them via JavaScript? – CBroe Jan 24 '22 at 08:01
  • Does [this](https://stackoverflow.com/questions/16302045/finding-child-element-of-parent-pure-javascript/16302110) answer your question? If I understood your problem right, the accepted answer here should be what you need. – SmilyLily Jan 24 '22 at 08:03
  • You can target the second div in CSS like `.first_new .second { /* some styling */ }` – Reyno Jan 24 '22 at 08:03
  • @SmilyLily thanks Thank you that's what I've been looking for all this time – Copernove Jan 24 '22 at 08:19

4 Answers4

1

yes you can

Method 1

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

Medthod 2

let parent = document.querySelector('.first');
parent.querySelector('.second');
Sarout
  • 821
  • 4
  • 25
1

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>
Copernove
  • 33
  • 8
0

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

Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
0

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.

atpriyanshu
  • 1
  • 3