selector

by Darby Rathbone

HTML

<ul>
    <td>0</td><td>1</td><td>2</td><td>3</td>
    
    <li><td>0</td>2</li>
    <li><td>0</td>3</li>
    <li><td>0</td>4</li>
</ul>
<li><td>0</td>1</li>

CSS

.selected{
    outline:dashed red 2px;
}

JavaScript

var all = [].slice.call(document.querySelectorAll('*'));
var selected = [];
window.addEventListener('click', function (e) {
    
    if (e.altKey) {
        selected.splice(selected.indexOf(e.target), 1);
        e.target.className = '';
    }
    else{
    if (e.ctrlKey && selected.indexOf(e.target) ===-1) {
        selected.push(e.target);
        e.target.className = "selected";
    }
        else
        {
            selected.forEach(function(s){
            s.className = "";});  
            selected = [];
            selected.push(e.target);
            e.target.className = "selected";
        }
    }
    
});