html - Why doesn't nth-of-type work on an image wrapped in an a tag? -

html - Why doesn't nth-of-type work on an image wrapped in an a tag? -

i attempting style specific image in series using nth-of-type function seems break when wrap images in tag. if utilize images works fine.

here fiddle: http://jsfiddle.net/o87oyfrx/1/

.row2 img:nth-child(2) { border: 1px solid green; } <div class="row2"> <a href="http://abcnews.go.com/"><img src="http://abcnews.go.com/assets/images/navigation/abc-logo.png" /></a> <a href="http://abcnews.go.com/"><img src="http://abcnews.go.com/assets/images/navigation/abc-logo.png" /></a> </div>

why doesn't :nth-of-type() work on image wrapped in <a> tag?

it would, since you're using :nth-child(), , not :nth-of-type(), i'll address instead (though reply pretty much same, regardless).

the problem you're facing selector selecting wrong element, because <img> elements within .group3 individually wrapped in <a> elements, img:nth-child(2) can't match anything; had tried img:nth-child(1), or img:first-child, you'd see both <img> elements have been selected because they're both :nth-child(1) , :first-child within respective parents.

so, select sec <img> element appears within .group3, need select via parent, <a>:

.row3 a:nth-child(2) img { border: 1px solid green; }

js fiddle demo.

it's of import note :nth-child() precisely tells (in name); selects <img> element if :nth-child() of parent. <img> elements individually wrapped in <a> elements, none of <img> elements can matched.

that means select sec <img> need select image (or potentially images), held within actual second-child of .row3 element, <a>.

references:

:nth-child().

html css css-selectors