nth-child()

[ben_hawk]

Hi, I am trying to accesses each article using nth-child to give them there own hover color, however nothing I have tried works, could anyone show me how to correctly use nth-child to target each article from the HTML below.

	




Example






Test




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non libero neque. Etiam nulla nunc, bibendum vel lobortis vel, fringilla sed magna.










Test


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non libero neque. Etiam nulla nunc, bibendum vel lobortis vel, fringilla sed magna.












Test




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non libero neque. Etiam nulla nunc, bibendum vel lobortis vel, fringilla sed magna.












Test




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non libero neque. Etiam nulla nunc, bibendum vel lobortis vel, fringilla sed magna.












Test




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non libero neque. Etiam nulla nunc, bibendum vel lobortis vel, fringilla sed magna.












Test




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non libero neque. Etiam nulla nunc, bibendum vel lobortis vel, fringilla sed magna.

Thanks for any help

[Paulie_D]

You haven’t posted the CSS but I would suggest that the article-wrapper divs are unnecessary and may be the root cause of why the nth-child isn’t working.

[Paulie_D]

Here’s Chris’ article on it: https://css-tricks.com/how-nth-child-works/

Actually, I think you’re probably after nth-of-type..see: http://jsfiddle.net/Paulie_D/ANuN3/

[TheDoc]

If you want to use nth-child you could do something like this:

.article-wrapper:nth-child(##) article { }

[Author]

Posts