CSS: remove separator on the last and first item

Question

Hi,

I have a menu div which has a dark background. Inside it, I have several menu item divs with 1px margins on the right and the left. This way I've got separators between them. Obviously these appear on the very left and very right side of the menu which I don't want. Is there a way to accomplish this without inserting 1-pixel divs as separators?

Thank you

edit: sorry, I thought it was descriptive enough. Here is the code:

<div id="menu">
       <a href="#"><div class="menu_item"><img src="imgs/menu/szabalyzat.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/profil.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/zenekarok.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/jelentkezes.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/esemenynaptar.png" /></div></a>
       <a href="#"><div class="menu_item"><img src="imgs/menu/mmmk_estek.png" /></div></a>
 </div>

IE6 incompatibility is OK (thankfully).

Answer 1

The simplest way yo achieve it is to mark your first and last elements with custom classes and remove that margins from them.

<ul class="menu">
  <li class="first">One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>
<style>
  .menu li { margin: 0 1px; }
  .menu .first { margin-left: 0; }
  .menu .last { margin-right: 0; }
</style>

You can also try using complex css selectors, like :first-child, but they do not work in older versions of MSIE.

OR, you can use 2px margins on the right side instead and go with only one additional class:

<ul class="menu">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li class="last">Four</li>
</ul>
<style>
  .menu li { margin-right: 2px; }
  .menu .last { margin-right: 0; }
</style>

Answer 2

If a high percentage of your audience's browsers support CSS3, you can use the :first-child and :last-child pseudo-classes:

div#menu div:first-child {
margin-left: none;
}
div#menu div:last-child {
margin-right: none;
}

Answer 3

Can't you have 2px left-margin instead of 1px on each side and then use the css pseudo class :first-child to remove these margin for the first item ?

EDIT: I agree with the fact that you should use border as separator rather than background but in case you do this that way for some good reasons, my answer's still valid :-)

Answer 4

The following rule will apply to all .menu_item elements that follow another .menu_item element:

.menu_item + .menu_item {
  border-left: 2px solid black;
}