Geek Answers Handbook

CSS: remove separator on last and first elements

I have a div menu with a dark background. Inside, I have several sections of menu items with 1px fields on the right and left. This way I have separators between them. Obviously, they appear on the left and right sides of the menu, which I do not want. Is there a way to do this without inserting 1-pixel divs as dividers?

thanks

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 fine (fortunately).

+4
source share
4 answers

You don't have a 2px left field instead of 1px on each side, and then use the css :first-child pseudo-class to remove that field for the first element?

EDIT: I agree that you should use the border as a separator, not a background, but if you do this for some reason, my answer is still valid :-)

+1
source

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; }
+13
source

The easiest way to achieve this is to mark your first and last items with custom classes and remove these fields 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, for example :first-child , but they do not work in older versions of MSIE.

OR, you can use the 2px fields on the right side 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>
+3
source

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

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

More articles:


All Articles