CODEWITHSUNDEEP
csspseudo-element
John the Painter
John the Painter

Reputation: 2615

Adding :last-child or :last-of-type to nav menu

Normally CSS is my thing, but I'm somehow dumbfounded why this isn't working for me. I'm building a site through Cargo for CMS purposes and you can see it here: http://cargocollective.com/mikeballard

In my menu, I have five main categories, and clicking on them (images, for example) reveals the list of work under that category.

<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>

Basically, I'm trying to select the last div in this set, and add a margin-bottom:15px to that div. I've tried using:

.project_link:last-child or .project_link:last-of-type but it doesn't seem to be working.

The HTML, which can't be altered too much to rely on Cargo, isn't great as if they had used list items, instead of divs with anchor tags I'm assuming this would be a lot easier.

Upvotes: 2

Views: 2901

Answers (1)

animuson
animuson

Reputation: 54729

The :last-of-type and :last-child selectors are not supported before IE9.

Class names, etc are not looked at when it comes to the :last-child and :last-of-type selectors. The .project_link:last-child selector will only trigger if the specific element is the last child in the parent element and has the class "project_link", and the .project_link:last-of-type selector will only trigger if the specific element is the last element of that type and has the class "project_link".

Both should trigger in a supporting browser, since it is implied as *.project_link:last-of-type and will check for every type of element inside that parent (which appears to only be divisions anyways). The last division shown here has the class "project_link" which would match this rule. The only reason these wouldn't trigger is if you had extra elements (or divisions) below what you're showing us, or you're using a browser which doesn't support it.

Upvotes: 2

Related Questions