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

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

1 голос
/ 13 декабря 2011

Обычно 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 в этом наборе и добавить поле с отступом: 15px к этому div. Я пытался использовать:

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

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

1 Ответ

2 голосов
/ 13 декабря 2011

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

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

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

...