4

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>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
strangeQuirks
  • 4,761
  • 9
  • 40
  • 67
  • 1
    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 Feb 05 '16 at 14:41
  • Is there an alternative way to do this then apart from using js? – strangeQuirks Feb 05 '16 at 14:41

2 Answers2

10

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)

WinK-
  • 372
  • 2
  • 14
  • 1
    Why do you think it is dirty? It's what `+` was *made* for. – BoltClock Feb 05 '16 at 14:43
  • that may actually work as its always the 2nd i need after an element with a selected class. thanks, ill give it a shot – strangeQuirks Feb 05 '16 at 14:44
  • @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 – WinK- Feb 05 '16 at 14:45
  • 1
    @WinK-: Selectors are sensitive to DOM structure by design. The OP's use case is hinged on the structure *anyway*. – BoltClock Feb 05 '16 at 14:47
  • @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. – barlop Nov 04 '17 at 21:00
  • @barlop: That's not what I'm reading from this answer. The author says using sibling combinators is dirty because any changes to the sibling's position will break the selector. But, as I've said, that's the whole *point* of sibling combinators, so there is nothing dirty about it at all. Having said that, I don't disagree on how unwieldy they can get - in fact, I answered a question *about* the hypothetical `:nth-sibling()` you mention, here: https://stackoverflow.com/questions/15790256/select-the-nth-following-sibling/15790304#15790304 – BoltClock Nov 05 '17 at 14:20
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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • How about this @BoltClock, can i do the same and select the element before it? Or better, is there a way to do that? – strangeQuirks Feb 05 '16 at 15:31
  • @user1009698: Unfortunately, there is [no previous sibling selector](http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector). – BoltClock Feb 05 '16 at 15:32