<div id=-demo-wrapper>
	<h2>Type in a selector to select one of the blue boxes</h2>
	<code>querySelector(<span class=-demo-string>'<input class=-demo-txt type=text />'</span>)</code> <button class=-demo-btn>Select</button>
	<br/><br/><label></label>
	<br/><br/>
	<p id=one class=block>class=“block” id=“one”</p>
	<p id=two class=block>class=“block” id=“two”</p>
	<p id=three class=block>class=“block” id=“three”</p>
	<p id=four class=block>class=“block” id=“four”</p>
</div>

.selected {
	background-color: #FD8C8D;
}

p {
	width: 100px;
	height: 100px;
	background-color: #29C2FE;
	display: inline-block;
	margin: 5px;
	padding: 5px;
	border-radius: 2px;
	text-align: left;
}


/* styles for demo */

#-demo-wrapper {
	padding-top: 36px;
}

.-demo-string {
	color: #48B492;
	font-family: courier;
}

.-demo-txt {
	border: 0;
	outline: 0;
	border-bottom: 1px dotted lightgrey;
	font-size: 1em;
	width: 125px;
	color: #48B492;
	font-family: courier;
}

.-demo-btn {
	background-color: #F7E00E;
	border: 0;
	outline: 0;
	padding: 3px;
	border-radius: 2px;
	cursor: pointer;
}

body {
	font-family: Crimson Text;
	font-size: 13pt;
	text-align: center;
	margin: 0;
}

var _ = document.querySelector.bind(document), label = _('label');
_('button').onclick = () => {
  try {
    var ele = _(_('input').value);
    if (!!(label.textContent)) label.textContent = '';
  } catch (err) {
    if (err instanceof SyntaxError || err.code === 12)
      label.textContent = 'Invalid selector.';
    throw new Error('abort');
  }
  var prev = _('.selected');
  if (prev !== null)
    prev.className = prev.className.split(' selected')[0];
  if (!!ele)
    ele.className += ' selected';
  else if (ele === null) label.textContent = 'No match found.';
}