I have multiple nested parent child elements. Now I am looking for the possible solution where on hover of any parent I want to change color of child which is only next to the parent. 

```
<div class="parent">The Parent paragraph.
    <div  class="child">This is Child Para
        <div class="parent">The Parent paragraph.
            <div  class="child">This is Child Para
                <div class="parent">The parent paragraph.
                    <div  class="child">This is Child Para
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 

```

Now as I said in code there is nested `parent` , `child` relationship. Now if you hover on first `parent` it should give effect to its associated `child` class only not to all the child classes. 

CSS is : 

```
div.parent:hover > .child:first-of-type {
    background: red;
}

```

I have even tried `first-of-type` but it's not working.

What changes in the css require to achieve that? 

**[Fiddle](https://jsfiddle.net/x6u4ff33/)**