Selectors

dabblet.css

/* Selectors */
body {
background: #00a3e6;
color: white;
font-size: 40px;
font-family: Helvetica;
min-height: 100%;
}

/* descendant */
.container ol {
}
/* child */
.container > ol {
  margin-left: 50px;
}

/* sibling */
span + span {
}

/* pseudo */
ol li:first-child, ol li:last-child {

}

/* pseudo */
ol li:nth-of-type(odd) {

}

/* pseudo */
li:hover {
}

input[type="text"][class~="valid"] {
 background: red;
}

dabblet.html

<div class="container">
	<ol>
		<li>:link</li>
		<li>:visited</li>
		<li>:active</li>
		<li>:hover</li>
		<li>:nth-of-type</li>
		<li>:even/odd</li>
		<li>:enabled</li>
		<li>:checked</li>
		<li>:disabled</li>
		<li>
		  <ol>
		    <li>secondary</li>
		  </ol>
		 </li>
	</ol>
</div>

<span>part 1</span><span>part 2</span>

<input type="text" class="login valid" value="Hi there" />
<input type="submit" class="login valid" checked />

dabblet.js

// alert('Hello world!');

settings.json

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