Modern Separators In Lists Menu


Some time ago using of pseudo-class as :first and :first-child was impossible due to browsers that didn't support CSS enough. Nowadays we have almost ideal browsers, which allows us to make really interesting CSS pirouettes.

For example, horizontal list menu with separators (pipes) in ancient CSS days was handcoded:

Item1 | Item2 | Item3 | Item4

Now we will use modern smart browsers. We will take a simple list without separators:

<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>

and add separators BY CSS itself with this style:


  1. li {
  2. display:inline;
    border-left:1px solid #ccc
  3. }
  1. li:first-child {
  2. border-left:none
  3. }

Now we have:

Thats all! The latest line deletes left border of first element in simple and elegant way. Here you are - so called piped list.

Well, there is more sophisticated way: li:after {content:" | "}, but you can try it yourself.

Here is an another interesting approach:

  1. #nav{
  2. overflow:hidden;
  3. width:100%;
  4. }
  5. #nav li{
  6. margin-left:-1px;/* all elements go on left*/
  7. }

Mohammed Hijazi on 09-11-2013

using first-child was awesome to give the first object special properties, I was give the first one a different class, but this is better thanks again.

Mel on 12-04-2012

Perfect, Thank you! Had one menu i had to control separately from the others.

Pytania on 26-02-2012

Great simple solution, I was looking for a menu like this, thanks!

Gabe Arnold on 21-02-2012

Excellent to the point tutorial. Thanks for your help, worked perfectly for me.

ap on 07-11-2011

thanks it works!

Shogun on 29-10-2011

Thanks works perfect

anothertrad on 24-02-2010

to do something using selectors like first-child in IE, you must use javascript.CSS will not work. Maybe only on IE 8

MilanPE on 10-12-2009

first-child is supported in IE7, IE8, but not in IE6.

lan on 24-11-2009

first-child don't work with IE8 ;-(

Maggie on 10-10-2007

I made couple of projects using such methods

<< First < Previous [1 / 2] Next > Last >>

Your opinion




Are you a human?
Are you a human?