CODEWITHSUNDEEP
css
Randy Minder
Randy Minder

Reputation: 48502

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

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?

Upvotes: 0

Views: 110

Answers (2)

Dryden Long
Dryden Long

Reputation: 10180

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/

Upvotes: 2

SeanCannon
SeanCannon

Reputation: 78006

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

Upvotes: 1

Related Questions