css nth child from element with class

Question

I there a way of selecting (using css) the nth child from an element with a certain class. For example, for the following, how could I select the li element with the id="this" (shown for explanation purposes)? So basically I want to say the 2nd element from the element with class="selected"

<ul>
    <li></li>
    <li class="selected"></li>
    <li></li>
    <li id="this"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

No, the nth-child doesn't work that way. It numbers the children based on their index below the parent. You can ofcourse write .selected + li + li for the 2nd element from that one but if its say the 8th child it becomes too much. — Harry
– Harry, Commented Feb 5, 2016 at 14:41
Is there an alternative way to do this then apart from using js? — strangeQuirks
– strangeQuirks, Commented Feb 5, 2016 at 14:41

WinK- · Accepted Answer · 2016-02-05 14:43:15Z

13

Actually you could do with + selector. It is a bit dirty, but works in your case. All you need is to know the exact position of element you need.

.selected + li + li (adding + li as much times as you need)

answered Feb 5, 2016 at 14:43

WinK-

4003 silver badges14 bronze badges

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

6 Comments

BoltClock Over a year ago

Why do you think it is dirty? It's what + was made for.

strangeQuirks Over a year ago

that may actually work as its always the 2nd i need after an element with a selected class. thanks, ill give it a shot

WinK- Over a year ago

@BoltClock because if position is not second its way too much code, and it is very sensitive for DOM changes. I'll rather think how to do it more clearly and better customizable

BoltClock Over a year ago

@WinK-: Selectors are sensitive to DOM structure by design. The OP's use case is hinged on the structure anyway.

barlop Over a year ago

@BoltClock nobody is denying that selectors are sensitive to DOM structure. But the point is that if one is interested in doing +table+div+table+div+table+div+div like 7 elements or +li+li+li+li+li. Then it'd be cleaner to do +:nth-sibling(8) or +li:nth-sibling(5) but no such facility exists.

|

Community · Accepted Answer · 2017-05-23 12:07:33Z

4

You use combinators to select an element relative to another element (which I'll refer to here as the reference element).

In this case, as you want the second sibling after li.selected, you need to step forward by two elements, using two + sibling combinators:

li.selected + li + li

As mentioned, you will need to repeat + li n times to reach the nth following sibling of your reference element (see also this related answer). There is no nth-sibling combinator, and :nth-child() is not designed to work with relative selectors.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Feb 5, 2016 at 14:43

BoltClock

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

2 Comments

strangeQuirks Over a year ago

How about this @BoltClock, can i do the same and select the element before it? Or better, is there a way to do that?

BoltClock Over a year ago

@user1009698: Unfortunately, there is no previous sibling selector.

Collectives™ on Stack Overflow

css nth child from element with class

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related