Second last child without jquery

Question

I am trying to find a way to select #inner3 …

 <div id="outer">
      <div id="inner1"> </div>
      <div id="inner2"> </div>
      <div id="inner3"> of interest </div>
      <div id="inner4"> </div>
 </div>

… by counting from last (#inner4) because sometimes #2 isn't present …

 <div id="outer">
      <div id="inner1"> </div>
      <div id="inner2"> of interest </div>
      <div id="inner3"> </div>
 </div>

and there are only 3 items (and so #inner3 becomes #inner2).

Note, #id are for clarity's sake, and not really present in my work.

I'm right now using body > .. > div:nth-child(3) but counting from top is a problem for me as explained above.

Any solution to this?

can't you add a class "of-interest" to the div that you're interested in? — Kaarel, Oct 12 '13 at 09:48
@KaarelKont-Kontson I can't change DOM, this is strictly client-side javascript. — laggingreflex, Oct 12 '13 at 09:49

ferdynator · Answer 1 · 2016-12-31T14:07:46.787

20

You should be able to grab your element with

 documentObject.lastChild.previousSibling

where documentObject is your parent.

Edit

Thank you to David Thomas: Even more accurate would be previousElementSibling because it returns an Element and not a text node:

documentObject.lastChild.previousElementSibling

Sources:
W3Schools
developers.mozilla

edited Dec 31 '16 at 14:07

answered Oct 12 '13 at 09:51

ferdynator

6,245
3
27
56

3

Bear in mind that this will, in many cases, return the textNode (the white-space) that exists between the elements. `previousElementSibling` might be more reliable (where it exists). – David Thomas Oct 12 '13 at 10:27
Good note. I change my answer accordingly. – ferdynator Oct 12 '13 at 10:29

score 4 · Accepted Answer · answered Oct 12 '13 at 09:51

4

If I undestood you correctly you could count from the end with :nth-last-child():

.outer *:nth-last-child(2){
  color: green;
}

answered Oct 12 '13 at 09:51

idmean

14,540
9
54
83

score 2 · Answer 3 · answered Feb 15 '21 at 11:02

2

The text node can be a problem in both lastChild and previousSibling This worked for me:

documentObject.lastElementChild.previousElementSibling

Found the other part of the solution here: https://stackoverflow.com/a/18341945/8486854

answered Feb 15 '21 at 11:02

SinunHenkka

445
6
14

Second last child without jquery

3 Answers3

Edit