CSS + adding to height and width of inherited divs

Question

For work I have to go through and create a ton of html pages and I find that many of the custom classes I have created can be used repeatedly if I can figure out a way to add to attributes such as height and width.

example:

.custom_class{font-size:1em;height:100px;width:80px;}

Lets say I have that class that I use on many of the divs in my pages but I stumble upon a template I am creating where the width needs to be a little bit wider. We will say I need the width to be 95px. Is there a way to add +15px to the current width and not have to go in and find out the current width of 80px and then either make a new class or right inline css to compensate for it?

.custom_class_differnt{font-size:1em;height:100px;width:95px;}

I dont want to have to recreate this entirely. I was hoping there was a way to just do maybe style="width:+15px;" or something. (a little in line css is fine, no more than that though)

thanks

Answer 1

With JQuery you could add the width you need:

$(".yourSelector").css("width","+=15px")

This will add 15px to the current width.

Answer 2

Perhaps an acceptable solution would just be to provide additional classes with alternate widths (or other styles).

For example:

.custom_class {
    font-size: 1em;
    height: 100px;
    width: 80px;    
}
.custom_class.wide {
    width: 95px;
}

And then in areas where you need the width to be wider, you'd simply create the element like <div class="custom_class wide">.