Experimenting with CSS3 selector by @nahuelsotelo

dabblet.css

/**
* Experimenting with CSS3 selector by @nahuelsotelo
* forge with Dabblet (http://dabblet.com)
* url: http://dabblet.com/gist/2714343
*/
body {
	background: lavender;
	font-family: sans-serif;
}
.container {
	clear:left;
	margin:0 auto;
	width:70%;
}
article {
	background:silver;
	border:2px solid #FFF;
	box-shadow:2px 2px 4px rgba(0,0,0,.4);
	box-sizing:         border-box;
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	list-style:none;
	float:left;
	margin:.4em 0;
	padding:.4em 1em;	
	text-align:center;	
}

/* one item */
article:first-child:nth-last-child(1) {
	width: 100%;
}

/* two items */
article:first-child:nth-last-child(2),
article:first-child:nth-last-child(2) ~ article {
	width: 50%;
}

/* three items */
article:first-child:nth-last-child(3),
article:first-child:nth-last-child(3) ~ article {
	width: 33.3333%;
}

/* four items */
article:first-child:nth-last-child(4),
article:first-child:nth-last-child(4) ~ article {
	width: 25%
}
article:first-child:nth-last-child(3),
article:first-child:nth-last-child(3) ~ article {
	border-color: teal;
}
.test article:not(:nth-child(1)) {
	background: red;
}
 

dabblet.html

<div class="container">
	<article>Item 1</article>
</div>

<div class="container">
	<article>Item 1</article>
	<article>Item 2</article>
</div>

<div class="container">
	<article>Item 1</article>
	<article>Item 2</article>
	<article>Item 3</article>
</div>

<div class="container test">
	<article class="one">Item 1</article>
	<article class="two">Item 2</article>
	<article class="three">Item 3</article>
	<article class="four">Item 4</article>
</div>

settings.json

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