[selectors for dummies] #css

dabblet.css

/**
 * selectors for dummies
 */

/* UNCOMMENT THE .a.a AND IT "TRUMPS" THE .a BELOW IT */
/* I'm first, but have higher specificity (so not overridden)*/
/*.a.a {
	color: gold;
}*/

/* A should be blue */
.a {
	color: blue;
}

/* I override blue above (to be red), but I can't beat the .a.a */
.a {
	color: red;
}

/* only A contained by A will be selected/green */
.a .a {
	color: green;
}

.itemsTable td p.tallRow {
	color: red;
}
.tallRow.tallRow.tallRow {
	color: gold;
}

dabblet.html

<div class="a">I'm just A</div>
<hr>
<div class="a">I'm A and container for another A <div class="a" >Contained A</div></div>
<hr>
<div class="a a">I'm A A and container for A<div class="a" >Contained A</div></div>
<hr>

<table class="itemsTable">
	<tbody>
		<tr>
			<td>
				<p class="tallRow">omg</p>
			</td>
		</tr>
	</tbody>
</table>

dabblet.js

// alert('Hello world!');

settings.json

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