CSS2.1 menu separator - no last-child or your best friend .last class :)

dabblet.css

/**
 * CSS2.1 menu separator - no last-child or your best friend .last class :)
 * 
 * @author	Giuseppe Gurgone <http://twitter.com/giuseppegurgone>
 */

ul li { 
	display: inline-block; 
	padding: 0 5%; 
}
*+html ul li { display: inline; } /* IE7 inline-block */

ul li + li { border-left: 5px solid hotpink; } /* here you go */



/* The rules below are needed to style this testcase */
p { width: 50%; }
code { 
	padding: 0.2em 0.4em;
	border-radius: 3px;


	background-color: hotpink; 
	
	color: #fff; 
	font-weight: 600; 
}

dabblet.html

<h1>CSS2.1 menu separator</h1>
<p>A proof of concept to show you how to add a menu separator without using the CSS3 <code>:last-child</code> pseudo-selector or the ugly <code>.last</code> class</p>
<p>This is easily done using the CSS2.1 adiacent sibling selector <code>+</code> to apply a border left to all the <code>li</code> except the first one.</p>
<h2 id="demo">Demo</h2>
<ul>
	<li>foo</li>
	<li>bar</li>
	<li>baz</li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}