JavaScript change style of a specific child div from another child div

Question

Let's say that we have a loop which result 3 divs with other 4 divs inside each, like this:

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

Now, I want to change the style css with javascript. How can I make something like this in javascript and work?

document.getElementsByClassName('one')[2].document.getElementsByClassName('two')[3].style.cssText {...};

I want to change the style css of the class .two from child [3] which is inside class .one from child [2]

Answer 1

You were very close. A HTMLElement has - like document - a .getElementsByClassName method to select some of the child elements:

 document.getElementsByClassName('one')[2].getElementsByClassName('two')[3].style.cssText = 'background-color: red'; 

 <div class="one"> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> </div> <div class="one"> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> </div> <div class="one"> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> </div> 

MDN: document.getElementsByClassName and Element.getElementsByClassName .

Answer 2

I'm not sure if you absolutely want to do this with JS, but just in case, here's a pure CSS approach :

 .one:nth-child(3) .two:nth-child(4){ background-color : red; } 

 <div class="one"> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> </div> <div class="one"> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> </div> <div class="one"> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> <div class="two">second class</div> </div> 

( nth-child is 1-based)

Answer 3

You can use below code -

var parent = document.getElementsByClassName('one')[2]
parent.getElementsByClassName('two')[3].style.color = "blue";