How to use nth-child() but not for child in CSS?

Question

I am looking to do something similar to jQuery's eq() selector to target elements on a page based on their order. :nth-child() is exactly what I need except I want to target elements are are not children. For example:

<div></div>
<div></div>

If I wanted to target the 2nd div above, what can I use in css (without actually giving it an id or class)?

Your example is pretty poor because both divs are children of an implicit body. — BoltClock
– BoltClock, Commented Oct 13, 2011 at 3:58

BoltClock · Accepted Answer · 2012-03-04 23:21:08Z

2

You cannot pick the nth element out of a set of arbitrary, unrelated matches with CSS selectors.

You can only do this in jQuery using $('div:eq(1)').

edited Mar 4, 2012 at 23:21

answered Oct 13, 2011 at 3:56

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Russell Dias Over a year ago

Ooo nth-match ... interesting. Have an upboat.

BoltClock Over a year ago

@Russell: I have a dreadful feeling that I should be keeping CSS4 stuff under wraps instead of dropping hints like this here and there :S

BoltClock Over a year ago

@Russell: I reviewed the CSS4 spec, and it doesn't seem that :nth-match() will do the same thing as jQuery's :eq() because :nth-match() behaves like :nth-child() in that it limits itself to sibling elements :/ Here's the link again: dev.w3.org/csswg/selectors4/#nth-match

DanMan · Accepted Answer · 2012-03-04 23:36:59Z

0

If those are the only to adjacent div elements, then you could use div + div. Otherwise that would match all divs starting from the 2nd one.

In that case, you'd also have to reset whatever CSS you've applied by specifying an div + div + div rule. That would apply to all following divs starting from the 3rd.

answered Mar 4, 2012 at 23:36

DanMan

11.6k4 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to use nth-child() but not for child in CSS?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related