2010-05-12 2 views
3

Есть ли селектор CSS для последнего вхождения класса на странице?Селектор CSS для последнего вхождения класса на странице

Скажем у меня есть этот HTML

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

Есть ли селектор CSS, который будет возвращать a тег с идентификатором фамилии. Может быть, что-то вроде .required:last?

Будет ли использовать прототип, если это имеет значение?

ответ

2

Использование Prototype:

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

(попеременно: var last = sel.last())

Там может быть более простой способ.

+0

согласно этой странице (http: // www. prototypejs.org/api/utility/dollar-dollar) last-child должен работать с Prototype, есть ли причина, по которой вы использовали этот метод? – robjmills

+0

Я вижу последнего ребенка на самом деле, я все равно хочу ... – robjmills

+0

на самом деле, '$ (document.body) .select ('a.required'). Last()' работает просто отлично! – robjmills

2

В CSS3 есть селектор last-child, но не многие браузеры поддерживают его.

Если вы можете использовать JQuery, вы можете сделать:

$("a.required:last") 
+0

': last-child' - неправильный ответ; он не позволит вам выбрать последний элемент, соответствующий селектору * на странице *, что и требовал ОП. Действительно, используя пример HTML HTML, ': last-child' будет соответствовать обоим элементам, которые он хочет рассказать разницу между: http://jsfiddle.net/urx4sjo7/ –

0

:last-of-type может работать в некоторых обстоятельствах (когда все .required элементов имеют общий родительский элемент), но поддержка spotty.(Edit: no it not not, last-of-type берет только имя элемента в учетной записи.) Используйте Javascript, если это работает для вас, или добавьте класс last в HTML.

@snaken: :last-child (CSS2 фактически) - это нечто совсем другое: он выбирает элементы, которые являются последними детьми их родителей. То есть

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

required:last-child будет на самом деле быть пустым здесь, потому что ни один из элементов .required не последние дети.

Смежные вопросы