title: Applying tag twice result in different css style
body: <p>This <code>&lt;h1&gt;Some text &lt;small&gt;&lt;small&gt;here&lt;/small&gt;&lt;/small&gt;&lt;/h1&gt;</code></p>
  
  <p>results</p>
  
  <p><img src="https://i.stack.imgur.com/IgYl2.jpg" alt="enter image description here"></p>
  
  <p>and this <code>&lt;h1&gt;Some text &lt;small&gt;here&lt;/small&gt;&lt;/h1&gt;</code></p>
  
  <p>results</p>
  
  <p><img src="https://i.stack.imgur.com/4HVwo.jpg" alt="enter image description here"></p>
  
  <p>and i want first one with small <code>here</code> word,  but without double <code>&lt;small&gt;</code> tags, so is there can be written any <em>rule to apply style twice</em> without creating new rule or touching existing for element?
  Currently used rule for <code>&lt;small&gt;</code> tags is</p>
  
  <p><code>h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small, .h1 .small, h2 .small, .h2 .small, h3 .small, .h3 .small {
      font-size: 65%;
  }
  </code> 
  Note: The point of question is possibility to apply style twice without creating or touching existing style of element. 
  For example lets say <code>&lt;a&gt;Foods&lt;/a&gt; and &lt;a class="twice"&gt;Cars&lt;/a&gt;</code>
  would become 
  <img src="https://i.stack.imgur.com/GL9bY.jpg" alt="enter image description here"></p>
  
  <p>So <code>twice</code> can be used anywhere to apply double style (make font smaller twice or bigger twice, or transparensy level twice, or brightess twice, padding twice and etc.)</p>