CSS3 nth-of-type all over the page?

Question

It seems to me that nth-of-type only works on the same parent element. Is there any way to make it work on the whole page?

My position: I would like to iterate over five hover colors for links. These links are scattered over many paragraphs. Since there is only one or two references in a paragraph, the first pair of guidance colors is disproportionate.

Thanks!

Answer 1

nth-of-type always looks at the index of an element relative to its direct parent: ( w3schools ), so it won’t work on the whole page.

It is best to implement this behavior using javascript, here's a quick demo using jQuery: jsfiddle

var styles = ["first", "second", "third"]; var index = 0; $("body").find("a").each(function() { $(this).addClass(styles[index++]); if (index >= styles.length) index = 0; });