Create Selectable li items as buttons

I have a user interface with buttons made of list items. I want to be able to have them be individually selectable, where they will control the color of another div. Right now I have them laid out and they have a css transition where they grow in scale when hovered over but I want then to stay fully scaled when selected. How would I do this?

I tried using the focus pseudo-class but that only works on input elements. I also tried active pseudo class but I think I am missing something with using those.

Lastly, what would I do if I want them to change the background color of another div to the color of the button?

I haven't built the elements that will be effected yet, I was just going to use some divs shaped like squares with a background color to test, but I am stuck at this point with giving the list items active states. There is probably some JS aspect to this that I am missing.

Here is my code: HTML:

<div id="colorSelection">
  <div class="base_color selector">
    <p class="sectionHeader">Base Color</p>
    <ul class="swatchSelector">
      <hr class="crossbar" width="90%">
      <li class="swatch one"></li>
      <li class="swatch two"></li>
      <li class="swatch three"></li>
      <li class="swatch four"></li>
      <li class="swatch five"></li>
      <li class="swatch six"></li>
      <li class="swatch seven"></li>
      <li class="swatch eight"></li>
    </ul>
  </div>
</div>

CSS:

/*reset*/
html, body, ul, li, p, a, img, hr{
  margin: 0px;
  padding: 0px;
  border: 0px;
  list-style-type: none;
  text-decoration: none;
}
#colorSelection {
    width: 320px;
    height: 720px;
    background-color:#d4d4d4;
    display: inline-block;
}
.selector{
    margin-bottom: 20px;
    padding: 10px;
    margin-left: 4px;
}
.sectionHeader {
    font-family: helvetica,arial,sans-serif;
    font-size: 20px;
    color:black;
    margin-bottom: 7px;
}
.swatch {
    width: 17px;
    height: 17px;
    border: 2px solid;
    border-radius: 50%;
    display: inline-block;
    margin-left: 12px;
    text-align: center;
    position: relative;
    transition: transform:2s ease-in-out;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
    cursor: pointer;
}
.swatch:hover{
    transform: scale(1.3);
}

.crossbar{
    border:1px white solid; 
    position: relative;
    right: 0px;
    top: 12px;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.25);  
}

.one{
    margin-left: 0px;
    background-color:#ffdc01;
    border-color:white;
    transition: border .01s;
}
.one:hover, .one:active {
    border-color:#ffdc01;
}
.two{
    background-color:#f27245;
    border-color:white;
    transition: border .01s;
}
.two:hover, .two:active {
    border-color:#f27245;
}
.three {
    background-color:#db3844;
    border-color:white;
    transition: border .01s;
}
.three:hover, .three:active {
    border-color:#db3844;
}
.four {
    background-color:#754c90;
    border-color:white;
    transition: border .01s;
}
.four:hover, .four:active {
    border-color:#754c90;
}
.five{
    background-color:#005c9f;
    border-color:white;
    transition: border .01s;
}
.five:hover, .five:active {
    border-color:#005c9f;
}
.six{
    background-color:#343333;
    border-color:white;
    transition: border .01s;
}
.six:hover, .six:active {
    border-color:#343333;
}
.seven {
    background-color:#6a6c70;
    border-color:white;
    transition: border .01s;
}
.seven:hover, .seven:active {
    border-color:#6a6c70;
}
.eight {
    background-color:#e9eae8;
    border-color:white;
    transition: border .01s;
}

.eight:hover, .eight:active {
    border-color:#e9eae8;
}

http://ift.tt/2BHTV7e