criography/dabblet.css

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */

a{
	padding		: 0.5em;
	text-decoration	: none;
	color		: orange;
}

	a:first-child{
		color:red;
	}


#content{
	height	: 50px;
	width	: 100px;
	border	: 1px solid #b2b2b2;
	margin	: 0.5em;
	position: relative;
}
	#content:before{
		content:"?";
		position:absolute;
		line-height:50px;
		width:100%;
		text-align:center;
	}

	#red:target ~ #wrapper #content{
		border:1px solid red;
	}


		#red:target ~ #wrapper #content:before{
			content:"r";
		}


	#orange:target ~ #wrapper #content{
		border:1px solid orange;
	}


		#orange:target ~ #wrapper #content:before{
			content:"o";
		}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a href="#red">red</a>
<a href="#orange">orange</a>
<div id="red"></div>
<div id="orange"></div>

<div id="wrapper">
	<div id="content"></div>
</div>

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* The first commented line is your dabblet’s title
	*/

	a{
	padding : 0.5em;
	text-decoration : none;
	color : orange;
	}

	a:first-child{
	color:red;
	}


	#content{
	height : 50px;
	width : 100px;
	border : 1px solid #b2b2b2;
	margin : 0.5em;
	position: relative;
	}
	#content:before{
	content:"?";
	position:absolute;
	line-height:50px;
	width:100%;
	text-align:center;
	}

	#red:target ~ #wrapper #content{
	border:1px solid red;
	}


	#red:target ~ #wrapper #content:before{
	content:"r";
	}


	#orange:target ~ #wrapper #content{
	border:1px solid orange;
	}


	#orange:target ~ #wrapper #content:before{
	content:"o";
	}
	<!-- content to be placed inside <body>…</body> -->
	<a href="#red">red</a>
	<a href="#orange">orange</a>
	<div id="red"></div>
	<div id="orange"></div>

	<div id="wrapper">
	<div id="content"></div>
	</div>