CODEWITHSUNDEEP
javascripthtmlcssclass
PickOne
PickOne

Reputation: 21

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

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]

Upvotes: 2

Views: 2552

Answers (3)

Jaspreet Singh
Jaspreet Singh

Reputation: 1762

You can use below code -

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

Upvotes: 2

Jeremy Thille
Jeremy Thille

Reputation: 26360

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)

Upvotes: 1

PeterMader
PeterMader

Reputation: 7275

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.

Upvotes: 3

Related Questions