CSS selector for the last occurrence of a class on a page

Question

Is there a CSS selector for the last occurrence of a class on a page?

Say i have this HTML

<dd>
    <span>
        <a class="required" id="forename">foo</a>
    </span>
</dd>
<dd>
    <span>
        <a class="required" id="surname">bar</a>
    </span>
</dd>

Is there a CSS selector that would return the a tag with the ID of surname. Something like .required:last maybe?

Will be using Prototype if that matters?

Answer 1

CSS3 has the :last-child selector, but not many browsers support it.

If you can use jquery, you can do:

$("a.required:last")

Answer 2

:last-child is a CSS2 selector. It isn't supported in IE6-7, Safari 3.

If you know the ID of the A, why not just use that? a#surname.

Another workaround is to just add "last" as another class to the last DD.

Answer 3

Using Prototype:

var sel = $(document.body).select('a.required').toArray()
var last = sel[sel.length-1]

(alternately: var last = sel.last())

There may be an easier way.

Answer 4

:last-of-type can work in some circumstances (when all .required elements have a common parent), but support is spotty. (Edit: no it won't, last-of-type only takes element name in account.) Use Javascript if that works for you, or add a last class in HTML.

@snaken: :last-child (CSS2 actually) is something very different: it selects elements which are last children of their parents. I.e.

<div>
  <a class="required">...</a>
  <a class="required">...</a>
  <a>...</a><!-- this is :last-child! -->
</div>

required:last-child will actually be empty here, because none of the .required elements are last children.