<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.';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.