別の子のdivからJavaScriptの特定の子のdivの変更スタイル

Question

このように、我々はそれぞれの内部で、他の4つのdivと3つの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> 

<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> 

、私は変更したいですスタイルCSSとjavascript。どのように私はjavascriptと仕事でこれを作ることができますか？

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

私はあなたが非常に接近していたchild [2]

Answer 1

からクラス.one内部にあるchild [3]からクラス.twoのスタイルのCSSを変更したいです。

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とElement.getElementsByClassNameを.getElementsByClassName方法は、子要素のいくつかを選択するために - documentのように - HTMLElementがあります。

Answer 2

私はあなたが絶対にJSでこれを行うにしたいかどうかわからないんだけど、念のために、ここでは純粋なCSSのアプローチです：

.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は1ベースです）

Answer 3

あなたは、コードの下に使用することができます -

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