How can I remove a border from 1 menu item?

[sebgates]

Hi, I am making a site that requires spacing bars between menu items. I created this by adding a 2px solid white border to the right hand side of the menu items.

I am trying to remove the border on the last menu item (contact) - in this case: #menu-item-12 by adding a specific rule for that id = border-right: 0px

Nothing happens.

Can anyone suggest a way to get rid of the border-right on the last menu item?

http://151.252.1.90/~active/

[Peter]

I think you forgot to select the anchor

#menu-item-12 a { border-right: 0; }

or this works also:

.genesis-nav-menu > .menu-item:last-child > a { border-right: 0; }

Note: I used > here so it won't affect the sub menus, but you don't have to. :last-child isn't supported in IE8 though, if that matters. http://caniuse.com/#search=last-child

[sebgates]

Thanks Peter, that sorted it. Top man. I did do this myself a year ago but I have forgotten what I did to achieve it. I will add your code to my snippets file.

[Author]

Posts