CSS pseudo childs

dabblet.css

/**
 * CSS pseudo childs
 */
/* Eerste en laatste */
.first-last li:first-child {
	background:red;
	color:white;
}
.first-last li:last-child {
	background:blue;
	color:white;
}

/* Elke tweede */
.nth li:nth-child(2n) {
	background:green;
}

/* Alleen eerste drie */
.nth-plus li:nth-child(-n+3) {
	background:orange;
}

/* Alleen de vierde */
.nth-een li:nth-child(4) {
	background:yellow;
}
html{
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	font:25px helvetica;
}
ul {
	clear:both;
	display:block;
	overflow:hidden;
	margin:50px 10px 60px;
}
li {
	padding:10px;
	list-style:none;
	float:left;
}

dabblet.html

<ul class="first-last">
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
</ul>
<ul class="nth">
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
</ul>
<ul class="nth-plus">
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
</ul>
<ul class="nth-een">
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
	<li>Lorem</li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}