Contoh kita ingin membuat sebuah menu dan kita tidak ingin li yang pertama memiliki border, kita bisa saja mengakalinya menggunakan li:first-child tapi kode kali ini sepertinya bisa menjadi alternatif yang baik untuk anda gunakan. kode ini ditulis oleh bang "Elad Shechter" di Coderwall, sebenarnya simpel aja sih caranya kita tinggal menggunakan selector + yang ada pada kode css.
ILUSTRASI
/* Pilih li setelah li pertama, ( li + li )
Sehingga li pertama tidak dikenakan border
*/
ul.menu li + li{
border-left:solid 1px #111;
-moz-box-shadow:-1px 0 0 #555;
-webkit-box-shadow:-1px 0 0 #555;
box-shadow:-1px 0 0 #555
}
<style type="text/css">
ul.menu,li{
list-style:none;
margin:0;
padding:0}
ul.menu{
background:#033;
overflow:hidden}
ul.menu li{
float:left;
padding:10px 20px}
ul.menu li a{
color:#aaa;
text-decoration:none;
font:normal 11px/20px Arial,sans-serif;
text-transform:uppercase}
/* Pilih li setelah li pertama li + li*/
ul.menu li+li{
border-left:solid 1px #111;
-moz-box-shadow:-1px 0 0 #555;
-webkit-box-shadow:-1px 0 0 #555;
box-shadow:-1px 0 0 #555}
</style>
<ul class="menu">
<li><a href="#url">Jalan-jalan</a></li>
<li><a href="#url">Shoping</a></li>
<li><a href="#url">belanja</a></li>
<li><a href="#url">Jualan</a></li>
<li><a href="#url">Rezki</a></li>
<li><a href="#url">( Zhint )</a></li>
</ul>
