Can I create a style that is based on another style? - css

Question

Bootstrap has the following defined in their bootstrap.css file:
.form-control {
display: block;
width: 100%;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
I want to create a style exactly like this, but without the width of 100%. And, if anything in .form-control changes, I want to make sure it's reflected in my new style. It's very much like I want a new style that is derived from .form-control but with changes I specify in my new style. Does CSS have syntax that supports this?

Answer 1

You can give your element two classes, then set the second class to overwrite the first. Something like this should work:
<div class="form-control other-class"></div>
Then create a new CSS rule like so:
.form-control.other-class{
width: auto;
}
Here is a fiddle of it in action: http://jsfiddle.net/xu46ed26/

Answer 2

.form-control, .my-other-class {
display: block;
width: 100%;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.my-other-class {
other : rule;
}