JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<p>Click on any row to toggle the <code>selected</code> class (and remove it from the rest).</p>
<p>Rows that are shaded black are matched by the rule in question.</p>
<div id="installations">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three" class="selected"></div>
    <div id="four"></div>
    <div id="five"></div>
</div>

CSS

p, #installations > div {
    margin: 0.5em;
}

#installations > div {
    height: 1.5em;
    line-height: 1.5em;
    color: #fff;
    background-color: #b0b0b0;
    padding: 0.5em;
}

#installations > div:nth-child(-n+3), 
#installations > div.selected, 
#installations > div.selected:nth-child(-n+3) ~ div:nth-child(4) {
    background-color: #000;
}

#installations > div:after {
    content: '#' attr(id);
}

#installations > div.selected:after {
    content: '#' attr(id) '.selected';
}

JavaScript

$('#installations > div').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});