JSFiddle - React, Tailwind, and code Playground

by stevelove

HTML

<!-- "otherbox" should turn blue when the radio is checked -->
<input type="radio" name="checks" />
<div class="redbox"></div>
<div class="otherbox"></div>

<!-- "otherbox" should turn blue when the radio is checked -->
<input type="radio" name="checks" />
<div class="redbox"></div>
<div class="otherbox"></div>

<!-- "otherbox" should turn blue when the radio is checked -->
<input type="radio" name="checks" />
<div class="redbox"></div>
<div class="otherbox"></div>

<br /><br />

<!-- This "otherbox" should already be blue -->
<a href="#">Non-Hover Link</a>
<div class="redbox"></div>
<div class="otherbox"></div>

<!-- "otherbox" should turn blue when the link is hovered -->
<a href="#" class="hoverable">Hover Link</a>
<div class="redbox"></div>
<div class="otherbox"></div>

CSS

input, a {
    display:block;
}

.redbox {
    width:30px;
    height:30px;
    display:inline-block;
    border:1px solid #f00;
}

input:checked + .redbox, 
a:not(.hoverable) + .redbox,
a:hover + .redbox {
    background:#f00;
}

.otherbox {
    width:30px;
    height:30px;
    border:1px solid #ccc;
    background:#ccc;
    display:inline-block;
}

input:checked + .redbox + .otherbox,
a:not(.hoverable) + .redbox + .otherbox,
a.hoverable:hover + .redbox + .otherbox {
    border:1px solid #0bf;
    background:#0bf;
}