Overriding border styles in CSS

Question

I have a three types of boxes being displayed in the image (2,3, and 4)

The first element is the selected style of a box.

I would like to apply this selected style on the other three.

• For 2 it is straight forward. The gray goes to black.
• For 3 I would need to replace the dashed with a solid line.
• For 4 I would replace the gray with the black, but I would want to keep the image.

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).

My CSS looks like this :

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;
}

I have demonstrated this in a JSFiddle :

https://jsfiddle.net/561aLm4z/7/

It's probably an obvious question, but how do I get the 'active' style to overwrite the styles on box 3 and 4?

Answer 1

Overwrite the background and border and move the css to the bottom, or make the css more specific (read more about css specifity) (by adding ul)

add1 = false
add2 = false
add3 = false
add4 = false

$("#2").click(
  function() {
    if (!add2) {
      $("#2").addClass("active")
      add2 = true;
    } else {
      $("#2").removeClass("active")
      add2 = false;
    }
  }
)

$("#3").click(
  function() {
    if (!add3) {
      $("#3").addClass("active")
      add3 = true;
    } else {
      $("#3").removeClass("active")
      add3 = false;
    }
  }
)

$("#4").click(
  function() {
    if (!add4) {
      $("#4").addClass("active")
      add4 = true;
    } else {
      $("#4").removeClass("active")
      add4 = false;
    }
  }
)

li {
  padding: 0.125rem;
  margin: 0.4375rem 1.0625rem 0.3125rem 0;
  border: 0.0625rem solid #d9d9d9;
}
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;
}
ul li.active {
  border: 0.0625rem solid black;
  background: none;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="hse-product-variant ">
  <li id="1" style="display: inline-block;" class="active">
    1
  </li>
  <li id="2" style="display: inline-block;" class="">
    2
  </li>
  <li id="3" style="display: inline-block;" class="wait-list">
    3
  </li>
  <li id="4" style="display: inline-block;" class="sold">
    4
  </li>
</ul>

Answer 2

The issue you are having is called 'specificity' and is best explained by the blog post commonly known as 'specificity wars'.

In a nutshell, each element has a specificity value.

• Elements, like li have a value of 1.
• Classes, like .sold have a specificity of 10.
• IDs, like #box have a specificity of 100.

By combining these values, you can overwrite less specific items.

The order of the rules also change the specificity. If you have two items with a matching specificity score, the later of the two will shine through.

As such, you can overwrite your li.sold rule (score of 11) by adding a li.sold.selected rule (score of 21).

You can also involve parent element ids to increase specificity. For example:

div.man (score of 11)

#house div.man (score of 111)

#London #house div.man (score of 211)

This is the basics of specificity. I recommend you read the article also - which puts the concept in terms of StarWars, which is always appreciated.