It seems to me that nth-of-type only works within the same parent element. Is there any way to get it work across the whole page?
My situation: I would like to cycle through five hover colors for links. These links are scattered across many paragraphs. Since there are only one or two links per paragraph, the first couple of hover colors are disproportionately favored.
Thanks!
nth-of-type always looks at the element's index relative to it's direct parent: (w3schools), so it won't work across the whole page.
Your best bet is to implement this behaviour with 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; }); 
I'd suggest keeping a consistent link colour (and other styles) for better UX. Different colours might be confusing for the user.
