CSS - dziedziczenie

Witam. Chcialbym odziedziczyc cos po klasie, a mianowicie mam klase.

#middle input.kontakt{
			color:#8f3bc5;
			font-family:Arial, Helvetica, sans-serif;
			padding:2px 10px 0px 10px;
                        float:left;
			width:50%;
			height: 25px;
			background:#262829;
			border:none;
			-webkit-border-radius: 8px;
	                border-radius: 8px;
		        }

i chcialbym zeby znow w divie middle klasa "kontakt1" (przykladowo), odziedziczyla wszystko po kontakt, ale w kontakt1 mialoby byc width 15px;
jak mam to zrobic? czy w ogóle da sie tak?

#middle input.kontakt{
  color:#8f3bc5;
  font-family:Arial, Helvetica, sans-serif;
  padding:2px 10px 0px 10px;
  float:left;
  height: 25px;
  background:#262829;
  border:none;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#middle input.kontakt1 {
  width:50%;
}

#middle input.kontakt2 {
  width:15px;
}

<div id="middle">
  <input class="kontakt kontakt1"/>
  <input class="kontakt kontakt2"/>
</div>

Spróbuj tak:

#middle input.kontakt, input.kontakt1, input.kontakt2{
  color:#8f3bc5;
  font-family:Arial, Helvetica, sans-serif;
  padding:2px 10px 0px 10px;
  float:left;
  height: 25px;
  background:#262829;
  border:none;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
#middle input.kontakt1 {
  width:50%;
}
 
#middle input.kontakt2 {
  width:15px;
}

Poza tym: http://tinyurl.com/bpr7b2d

ja zrobilem tak i dziala, ale nie wiem czy tak moze tez byc?

#middle input{
  color:#8f3bc5;
  font-family:Arial, Helvetica, sans-serif;
  padding:2px 10px 0px 10px;
  float:left;
  height: 25px;
  background:#262829;
  border:none;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
#middle input.kontakt {
  width:50%;
}
 
#middle input.kontakt1 {
  width:15px;
}

a w html:

<div id="middle">
  <input class="kontakt"/>
  <input class="kontakt1"/>
</div>

tak dziala, wiec tak tez moze byc?

Użyj SCSS i będziesz miał to i wiele innych ficzerów.