title: CSS change a single element of one class without using a different class name
body: <p>I was wondering if there is way to do this. </p>
  
  <p>I want to change only a single property of a specific CSS class, without having it to copy it again and assigning a different class name. </p>
  
  <p>So, if I have this class</p>
  
  <pre><code>&lt;div class="example"&gt;I am a red font with properties &lt;/div&gt;
  </code></pre>
  
  <p>It's CSS </p>
  
  <pre><code>.example {
  font-size:2em;
  font-color:red;
  padding:2%;
  display:inline;
  //other several properties }
  </code></pre>
  
  <p>Now, I want to use the example class in my other div, but I JUST want the font to be green. I don't want to copy the same property and just assign a different class name, </p>
  
  <pre><code>&lt;div class="example2"&gt;I am a green font with properties &lt;/div&gt;
  </code></pre>
  
  <p>Again the example2 will be the same as example, but only the font color will change</p>
  
  <p>It's CSS</p>
  
  <pre><code>.example2 {
   font-size:2em;
   font-color:green;
   padding:2%;
   display:inline;
   //other several properties same as example class
  </code></pre>
  
  <p>Is there a way to import the CSS property without having it to copy it and rename it? Something like</p>
  
  <pre><code>&lt;div class="example" onlychange="font-color:green"&gt;
             I am a green font with properties &lt;/div&gt;
  </code></pre>
  
  <p>Any techniques to achieve something like the onlychange attribute? </p>