nth-child - second img of a div

Question

I have two images inside of a div

<div class="my_div">

<img src="1.jpg" />
<img src="2.jpg" />

</div>

I have tried following css

.my_div img:nth-child(2) { margin-top:130px; }

But this doesn't work? Any idea why?

This should work. Do you have any other elements before the images? In that case, use `nth-of-type()` instead. — Bram Vanroy, Dec 05 '16 at 19:20
Works for me https://jsfiddle.net/j08691/7jvt81fb/. What do you get? — j08691, Dec 05 '16 at 19:22
It applies perfectly with your code..,just check if any other styles are overriding it — Geeky, Dec 05 '16 at 19:23
What do you want to obtain? Add suspected result as handmade image, or explain it more exhaustive than by word "doesn't work'. — Daniel, Dec 05 '16 at 19:29

score 0 · Answer 1 · answered Dec 05 '16 at 19:24

0

use display: inherit; on .my_div img:nth-child(2)

.my_div img:nth-child(2) {
    margin-top:130px;
    display: inherit;
}

<div class="my_div">

<img src="1.jpg" />
<img src="2.jpg" />

</div>

answered Dec 05 '16 at 19:24

jafarbtech

1 Answers1