35

How I can get the last element (hr) from the following code:

<div>
    <div>
        <span class="hr"></span>
    </div>

    <div>
        <span class="hr"></span>
    </div>

    <div>
        <span class="hr"></span> <!-- I need this -->
    </div>
</div>

.hr:last-child doesn't work for this.

Of course, DOM structure could be more complicated. I just need to fetch the last needed element.

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
Alex Ivasyuv
  • 8,585
  • 17
  • 72
  • 90

3 Answers3

77

Your question isn't quite clear; there are several ways to get the last .hr element from your example, but you say "DOM structure could be more complicated." In order to answer your question, you need to mention what possible DOM structures you could have; in some it might be possible, in some it will not be.

Here is one way to get the .hr out of the last div:

div div:last-of-type .hr

Here's another way to get the .hr out of the last child of the outer div:

div :last-child .hr

If you need to get the last .hr element out of the document, regardless of what it's inside, then you can't do that in CSS. In CSS, you can only select the first, last, or nth element at one particular level of the hierarchy, you can't select the last element of some type regardless of what it's nested in.

Brian Campbell
  • 322,767
  • 57
  • 360
  • 340
  • Great post. `dless of what it's inside, then you can't do that in CSS`, 5 years later, is this still the same though? Just curious, thanks! – NiCk Newman Aug 11 '15 at 02:11
  • 1
    I don't believe anything has changed with regards to this. [CSS Selectors Level 4](https://drafts.csswg.org/selectors/#the-nth-child-pseudo) extends the `:nth-last-child()` and `:nth-last-of-type()` to allow specifying an additional selector constraining the set of elements that you are matching against, so you could select the last element with class `.hr` out of a set of siblings with `:nth-last-child(1 of .hr)`. They don't allow selecting over all elements in the document, however, just out of siblings of a common parent element. And I think no browsers yet support this syntax; it's a draft – Brian Campbell Aug 12 '15 at 14:12
  • [Previous drafts of CSS Selectors Level 4](http://www.w3.org/TR/2013/WD-selectors4-20130502/#the-nth-last-match-pseudo) had a `:nth-last-match(1 of .hr)` pseudo-class that would do what the original question asked, but it was removed, probably for being impractical to implement. – Brian Campbell Aug 12 '15 at 14:20
  • 1
    Ah, I midunderstood. `:nth-match` and `:nth-last-match` have just been replaced with the new syntax for `:nth-child`; they were never for selecting arbitrary descendents, just siblings of a single parent. See [this message](https://lists.w3.org/Archives/Public/www-style/2014Jan/0607.html) for the explanation: "I think \[:nth-child() is\] more clear. :nth-match() could be interpreted as matching against the tree, not just against children" – Brian Campbell Aug 12 '15 at 14:26
8
div:last-child .hr
Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
  • Then you should place something like a `class` on those containing `div` elements to identify that type of element. Once that is done, change `div` to `.class`. – Delan Azabani Sep 18 '10 at 08:57
3

The following selector should work:

div *:last-child *:last-child

Demo: https://jsfiddle.net/78w3bofg/1/

Dylan Gordon
  • 74
  • 4