Question

I have one or two divs on the page with a class/classes of foo. I need to select the second one only, that means if there’s only one on the page don’t select it.

I tried div.foo:not(:first) and div.foo:nth-child(2) and both don’t seem to work.

Any ideas?

Answer 1

There isn’t an :nth-of-class() selector, but if both div.foo elements share the same parent, you can use one of the sibling selectors depending on whether the second div.foo comes immediately after the first or not:

div.foo + div.foo /* Is immediately after */
div.foo ~ div.foo /* Is somewhere after among its siblings */

If there are potentially more than two such divs, you may need to undo the styles in the above rule using one of these for any subsequent elements:

div.foo + div.foo ~ div.foo
div.foo ~ div.foo ~ div.foo

And don’t worry about browser support, this works in IE7+.