Question #72909693 - no variables

by tjcrowder

HTML

<div>
    <div class="box">
        <div id="boxGreen" class="box box--green"></div>
        <div id="boxBlue" class="box box--blue"></div>
        <!-- move the default one last -->
        <div id="boxRed" class="box box--red"></div>
    </div>
    
    <nav>
      <ul>
        <li><a href="#boxRed">Show red box</a></li>
        <li><a href="#boxGreen">Show green box</a></li>
        <li><a href="#boxBlue">Show blue box</a></li>
      </ul>
    </nav>
</div>

CSS

.box {
    height: 100px;
    width: 100px;
}

.box--red { 
    background-color: #ff0000;
}

.box--green { 
    display: none;
    background-color: #00ff00;
}

.box--blue { 
    display: none;
    background-color: #0000ff;
}

:target ~ .box--red { /* when any other than red is selected */
  display: none;
}
.box--green:target, .box--blue:target {
    display: block;
}