Question

I have some markup like so:

<li>
  <span>
    <div>
      <a href="#" class="anchor menu-active">Afghanistan</a>
      <div class="container menu-visible"></div>
    </div>
   </span>
   <span>
      <div>
        <a href="#" class="anchor">Kabul(AFT)</a>
        <div></div>
      </div>
  </span>
</li>

I wish to select the very last element with the class anchor in terms of the li. The result is that the <a href="#" class="anchor">Kabul(AFT)</a> should be selected. There can be an arbitary amount of elements with this the anchor class within the li.

I came up with this selector: li .anchor:last-of-type, but it selects both elements in there.

How can I select the absolutely last element with the anchor class?

Answer 1

I ended up using some javascript to skirt around the problem as using a clean CSS selector based solution was impossible.

Initially, the plan was to grab the last .anchor and get it’s x and y coordinates to calculate a set of coordinates for an overlay.

The solution was to just get the coordinates of the parent li, get it’s height, and then do the calculation.

Not as neat as a CSS selector, but it works.