css :nth-child()

by redky

HTML

<section class="function">
    <label for="selector">Input selector:</label>
    <input type="text" id="selector" value=":nth-child(2n+1)" placeholder=":nth-child(2n+1)">
    <input type="button" id="button" value="use" />
</section>
<section>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</section>

CSS

.box {
    height: 20px;
    width: 45%;
    float: left;
    box-sizing: border-box;
    background: #aaa;
    margin: 10px;
}

JavaScript

var head = document.querySelector('head');
var btn = document.querySelector('#button');
var input = document.querySelector('#selector');

function collect() {
    var selector = input.value.trim();
    if (!selector) return;
    var y = document.querySelector('#y');
    if (!y) {
        y = document.createElement('style');
        y.id = 'y';
        head.appendChild(y);
    }
    var style = '.box<%selector%>{background:#faa;}';
    y.innerHTML = style.replace('<%selector%>', selector);
}
input.onkeydown = function (e) {
    if (e.keyCode === 13) collect();
};
btn.onclick = function () {
    collect();
};

collect();