Question

I’m trying to expand a div. However everything works accept the ‘height’ property. I use jQuery’s addClass function to add this class;

.expandHighlight
{
   height:300px;
   border-color:rgba(48,110,158,.75)!important;
   box-shadow:0 0 5px 2px rgba(48,110,158,.5);
}

using the jQuery function;

$('#expand').click(function()
   {
    $('#buttonField').css('visibility','hidden');
    $('#expand').addClass("expandHighlight");
   });

And the div im trying to expand has the css;

#expand
{
   background-color:#F9F9F9;border-radius:3px;
   border:1px solid #C0C0C0;
   width:500px;
   height:66px;
   border-radius:2px;
}

Answer 1

When you add the class, you then have two CSS rules that pertain to the same object for height. That means the the CSS specificity rules will determine which CSS rule applies.

In this case, the #expand rule has more specificity than the .expandHighlight rule so it wins.

You can fix this by adding more specificity to the .expandHighlight rule like this:

#expand.expandHighlight {
   height:300px;
   border-color:rgba(48,110,158,.75)!important;
   box-shadow:0 0 5px 2px rgba(48,110,158,.5);
}

And, then it will have more specificity and will win when the expandHighlight class is assigned.

You can read more about CSS specificity and how it works here.

---

You could also fix it by making both of the rules be only a class and putting the expandHighlight rule after the regular height rule like this:

<div id="expand" class="expandNormal"></div>

.expandNormal {
    height: 500px;
    border:1px solid #C0C0C0;
    width:500px;
}

.expandHighlight {
   height:300px;
   border-color:rgba(48,110,158,.75)!important;
   box-shadow:0 0 5px 2px rgba(48,110,158,.5);
}

You would of course add class="expandNormal" to the #expand object so it would get the default rule which would then be override by the expandHighlight rule only when that class was also present.