Добавление :last-child или :last-of-type в меню навигации

Обычно мне нравится CSS, но я как-то ошеломлен, почему это не работает для меня. Я создаю сайт с помощью Cargo для целей CMS, и вы можете увидеть его здесь: http://cargocollective.com/mikeballard

В моем меню есть пять основных категорий, и нажатие на них (например, на изображения) открывает список работ в этой категории.

<div id="menu_2444167" class="link_link">
    <a id="p2444167" name="mikeballard" target="" href="http://cargocollective.com/mikeballard/filter/images">Images</a>
</div>
<div id="menu_2444188" class="project_link">
    <a name="mikeballard" rel="history" href="mikeballard/#2444188/Ultra-Nomadic-Def-Smith-Cycle-2011">Ultra Nomadic Def Smith Cycle, 2011</a>
</div>
<!-- more divs here -->
<div id="menu_2444201" class="project_link">
    <a name="mikeballard" rel="history" href="mikeballard/#2444201/Archive">Archive</a>
</div>

По сути, я пытаюсь выбрать последний div в этом наборе и добавить к этому div margin-bottom:15px. Я пробовал использовать:

.project_link:last-child или .project_link:last-of-type, но, похоже, это не работает.

HTML, который нельзя слишком сильно изменить, чтобы полагаться на Cargo, не очень хорош, как если бы они использовали элементы списка вместо div с тегами привязки, я предполагаю, что это было бы намного проще.


css pseudo-element cargo
person John the Painter    schedule 13.12.2011    source источник
comment
Если последний .project_link является последним дочерним элементом любого родительского элемента, :last-child должен работать. Если это также последний элемент div, :last-of-type должен работать. Вы случайно не тестируете в старой версии IE?   -  person BoltClock    schedule 13.12.2011

Ответы (1)


arrow_upward
2
arrow_downward

Селекторы :last-of-type и :last-child не поддерживаются до IE9.

Имена классов и т. д. не рассматриваются, когда речь идет о селекторах :last-child и :last-of-type. Селектор .project_link:last-child срабатывает только, если определенный элемент является последним дочерним элементом в родительском элементе и имеет класс "project_link", а селектор .project_link:last-of-type срабатывает только< /em> срабатывает, если конкретный элемент является последним элементом этого типа и имеет класс "project_link".

Оба должны запускаться в поддерживающем браузере, поскольку он подразумевается как *.project_link:last-of-type и будет проверять каждый тип элемента внутри этого родителя (который в любом случае выглядит только как деление). Последний показанный здесь раздел имеет класс "project_link", который соответствует этому правилу. Единственная причина, по которой они не сработают, заключается в том, что у вас есть дополнительные элементы (или разделы) ниже того, что вы нам показываете, или вы используете браузер, который не поддерживает это.

person animuson    schedule 13.12.2011
comment
Итак, вы говорите, что .project_link:last-of-type должен работать? Спасибо за объяснение. Если вы посмотрите на URL-адрес, который я вам дал, вы увидите, что разделов больше. Я думаю, что нет никакого способа выбрать это. - person John the Painter; 13.12.2011
comment
@Richard: Нет, не в то время. Но недавно я опубликовал информацию о готовящемся CSS4 :nth-match() селектор. - person animuson; 14.12.2011