title: Overriding border styles in CSS
body: <p>I have a three types of boxes being displayed in the image (2,3, and 4)</p>
  
  <p><a href="https://i.stack.imgur.com/QQmuT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QQmuT.png" alt="enter image description here"></a></p>
  
  <p>The first element is the <strong><em>selected</em></strong> style of a box.</p>
  
  <p>I would like to apply this selected style on the other three. </p>
  
  <ul>
  <li>For 2 it is straight forward. The gray goes to black.</li>
  <li>For 3 I would need to replace the dashed with a solid line.</li>
  <li>For 4 I would replace the gray with the black, but I would want to keep the image.</li>
  </ul>
  
  <p>However I am trying to understand how it would work with inheritance in CSS. I am just adding a class 'active' to mark it as selected. It works fine for 2, but for 3 and 4 it does not know how to process the order of class names. I cannot remove the classes of the elements, because obviously I want to cascade the changes through (like the image in option 4).</p>
  
  <p>My CSS looks like this :</p>
  
  <pre><code>li {
    padding: 0.125rem;
    margin: 0.4375rem 1.0625rem 0.3125rem 0;
    border: 0.0625rem solid #d9d9d9;
  }
  
  li.active {
    border: 0.0625rem solid black;
  }
  
  li.sold {
    display: inline-block;
    border: 1px solid #ccc;
    background: url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
    background-size: 100% 100%;
  }
  
  li.wait-list {
    display: inline-block;
    border: 1px dashed #ccc;
  }
  </code></pre>
  
  <p>I have demonstrated this in a JSFiddle : </p>
  
  <p><a href="https://jsfiddle.net/561aLm4z/7/" rel="nofollow noreferrer">https://jsfiddle.net/561aLm4z/7/</a></p>
  
  <p>It's probably an obvious question, but how do I get the 'active' style to overwrite the styles on box 3 and 4?</p>