Question

I want to add different styles to different li’s and the result should be something like this

test one  | test two | test three

#nav ul,
li {
  list-style-type: none;
}

#nav ul li {
  float: left;
  height: 45px;
  padding: 8px;
  width: 100px;
}

#nav ul li .border {
  border-left: 1px solid #ccc;
}

#nav ul li a {
  color: red;
  font-size: 15px;
}

#nav ul li a:hover {
  color: blue;
}

<div id="nav">

  <ul>
    <li>test one</li>
    <li class="border">test two</li>
    <li class="border">test three</li>
  </ul>

</div>

Answer 1

write like this:

li + li{
 border-left:1px solid #ccc;
}

Check this http://jsfiddle.net/fpQ8y/

#nav ul,
li {
  list-style-type: none;
}

#nav ul li {
  float: left;
  height: 45px;
  padding: 8px;
  width: 100px;
}

#nav ul li+li {
  border-left: 1px solid red;
}

#nav ul li a {
  color: red;
  font-size: 15px;
}

#nav ul li a:hover {
  color: blue;
}

<div id="nav">

  <ul>
    <li>test one</li>
    <li class="border">test two</li>
    <li class="border">test three</li>
  </ul>

</div>