hileon/dabblet.css

## dabblet.css
/**
 * CSS3 selectors
 */

p:first-child {
	color: blue;
}

p:last-child {
	color: red;
}

p:nth-child(2) {
	color: green;
}

p:nth-child(3n+1) {
  font-style: italic;
  color: black;
}


p:nth-last-child(2) {
	color: olive;
}

img[src*="ogo"] {
	border: 1px solid red;
	margin: 0 20px;
}

div:first-of-type {
	border: 1px solid cyan;
	padding: 5px;
}

article:empty {
	background: lightgray;
	width: 100px;
	height: 20px;
	margin: 10px 0;
}

p:not(.tac) {
	font-weight: bold;
	text-decoration: underline;
}

article ~ div {
	background: yellow;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<article>Blah</article>
<article></article>
<div>
  <p class="tac">Un</p>
  <p class="tac">Dos</p>
  <p class="tic">Tres</p>
  <p class="tac">Quatre</p>
</div>
<div>
  <img src="logo-un.jpg">
  <img src="logo-dos.jpg">
</div>

## settings.json
{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* CSS3 selectors
	*/

	p:first-child {
	color: blue;
	}

	p:last-child {
	color: red;
	}

	p:nth-child(2) {
	color: green;
	}

	p:nth-child(3n+1) {
	font-style: italic;
	color: black;
	}


	p:nth-last-child(2) {
	color: olive;
	}

	img[src*="ogo"] {
	border: 1px solid red;
	margin: 0 20px;
	}

	div:first-of-type {
	border: 1px solid cyan;
	padding: 5px;
	}

	article:empty {
	background: lightgray;
	width: 100px;
	height: 20px;
	margin: 10px 0;
	}

	p:not(.tac) {
	font-weight: bold;
	text-decoration: underline;
	}

	article ~ div {
	background: yellow;
	}
	<!-- content to be placed inside <body>…</body> -->

	<article>Blah</article>
	<article></article>
	<div>
	<p class="tac">Un</p>
	<p class="tac">Dos</p>
	<p class="tic">Tres</p>
	<p class="tac">Quatre</p>
	</div>
	<div>
	<img src="logo-un.jpg">
	<img src="logo-dos.jpg">
	</div>