By StudioARE on

I have a little CSS problem. Well, I am stuck on this one.

I'm trying to theme(/style) the last menu item without luck. I managed the "active" menu item, but not for the last menu item.
Anyone know how I give the last menu item a different background?

HTML

<div id="primary-menu" class="primary-menu block">
<div id="primary-menu-inner" class="primary-menu-inner inner clearfix">

<ul class="menu"><li class="menu-114 active-trail first active"><a href="/" title="Home" class="active">Home</a></li>
<li class="menu-115"><a href="http://example.com" title="Link">Link</a></li>
<li class="menu-140"><a href="/about" title="About">About</a></li>
<li class="menu-116 last"><a href="http://example.com" title="Link 2">Link 2</a></li>
</ul></div><!-- /primary-menu-inner -->
</div><!-- /primary-menu -->

CSS

.primary-menu {
	background: #171a1e;
	color: #e1e5ea;
	font-size: 20px;
	margin: 0;
}

.primary-menu ul li a, .primary-menu ul li .nolink {
	border-left: 1px solid #666; /* REMOVE */
	display: block;
	padding: 10px 30px;
}
#primary-menu-inner {
	margin: 0;
}

/* Primary menu link style */
.primary-menu ul li a {
	background:#171a1e;
	color: #e1e5ea;
}
.primary-menu ul li a:hover, .primary-menu ul li a:focus, .primary-menu ul li a:active {
	background:#3a3d40;
	color: #b7c1cf;
}
/* Active menu link */
.primary-menu .active {
	background:#F00;
}
/* Last link (not working) */
.primary-menu .last {
	background:#0F0;
}
li.last {
	background:#F6C;
}

Base theme is "Fusion", if that matters.

⋅ Categories: Drupal 6.x

Comments

limbovski’s picture

limbovski commented

I've done the exact same thing on a site recently and it worked. I can't spot any errors there. If you haven't already, try having a look in Firebug to see where the styles for the last list item are coming from, is anything overriding your CSS, or to identify any errors.

In theory what you've done should work in the same manner as the .active class.

EDIT:

Try using just one of the following:

.primary-menu .last {
background:#0F0;
}
li.last {
background:#F6C;
}

Also, try doing - border: 1px solid #f0f; to see if it picks up the .last either.

gaurav_m’s picture

gaurav_m commented

To theme to the last child element

you can try via css

.primary-menu li:last-child {background:#0F0;}

or to theme the last-child anchor

.primary-menu li:last-child a{background:#0F0;}
adrianmak’s picture

adrianmak commented

pseudo class :last-child not work in ie 6,7,8

alexfc’s picture

alexfc commented

Hi

The reason it works on "active" is because you have the class "active" in both the li and its a.

For the "last" element, the styles applied to the link have preference over the ones applied to its li parent.

You can follow one of these two solutions:

1. Add a class of "last" to the a element in the last li element of the list.

or

2. Change the CSS style .primary-menu .last {background:#0F0;} to .primary-menu .last a {background:#0F0;}

I have tried both and they worked.

Hope this helps.