title: Is possible overwrite a css class with another css class
body: <p>I think this question is only related with css... but I will give you some context:</p>
  <p>I am working with the zk framework and I have some comboboxes in my zul page... ZK render its components and turn them into html components with some predefined styles (css classes)... I can override those styles... but I want to override a whole css class with another so I can put my css class only in the components I want to change its style.</p>
  <p>This is how a combobox is created:</p>
  <p><a href="https://i.stack.imgur.com/UnF6s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UnF6s.png" alt="Combobox creation" /></a></p>
  <p>As you can see, it is turn into an <code>input</code> with a css class called z-combobox-input</p>
  <p>If I overwrite that class directly, like this:</p>
  <pre><code>.z-combobox-input{
      border:1px solid #000;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-o-border-radius:3px 0 0     3px;-ms-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;margin:0;padding:4px 5px;line-height:14px;background:#fff
  }
  </code></pre>
  <p>It will afect every combobox in the page, as a result I get:</p>
  <p><a href="https://i.stack.imgur.com/Hza0z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hza0z.png" alt="css-rule afecting every component" /></a></p>
  <p>So I want to know if exist a way to do something like this:</p>
  <pre><code>.class-original{
      //some styles in here
  }
  
  .class-overriding{
      .class-original{
          //new styles in here
      }
  }
  </code></pre>
  <p>So I can put my .class-overriding only in the components I need to change and not in every component of the same type.</p>
  <pre><code>&lt;combobox id=&quot;newCombo&quot; sclass=&quot;class-overriding&quot; /&gt;
  </code></pre>
  <p>I made <a href="http://zkfiddle.org/sample/2l87mr9/1-Overriding-zk-combobox-style" rel="nofollow noreferrer">this</a> fiddle if you want to try a solution.</p>
  <p>I was seeing <a href="https://stackoverflow.com/q/4060405/5602069">this</a> question and apparently it is not possible... So: is there another way to achieve that?</p>
  <p>Thank you.</p>
  <p><strong>UPDATE</strong></p>
  <p>I cannot use the id that is generated dinamically (in this case &quot;vXgV3-real&quot;).</p>
  <p>I can modify some properties from the combobox either by putting a css class or by using the tag <code>style</code>:</p>
  <pre><code>&lt;combobox id=&quot;combo1&quot; style=&quot;background: red&quot; /&gt;
  </code></pre>
  <p>But I cannot change that border in particular, like this:</p>
  <pre><code>&lt;combobox id=&quot;combo2&quot; style=&quot;border:1px solid #000;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-o-border-radius:3px 0 0     3px;-ms-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;margin:0;padding:4px 5px;line-height:14px;background:#fff&quot;/&gt;
  </code></pre>
  <p>Because when it is render (when zk change its component to html components) it turns in this:</p>
  <p><a href="https://i.stack.imgur.com/3LKsE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3LKsE.png" alt="Result using tag style" /></a></p>
  <p>So, when zk change the <code>combobox</code> component to:</p>
  <pre><code>&lt;span id=&quot;nZEQo&quot; style=&quot;width:80%;&quot; class=&quot;myCombo z-combobox&quot;&gt;
      &lt;input id=&quot;nZEQo-real&quot; class=&quot;z-combobox-input&quot; autocomplete=&quot;off&quot; value=&quot;&quot; type=&quot;text&quot; style=&quot;width: 269px;&quot;&gt;
      &lt;a id=&quot;nZEQo-btn&quot; class=&quot;z-combobox-button&quot;&gt;
          &lt;i class=&quot;z-combobox-icon z-icon-caret-down&quot;&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;div id=&quot;nZEQo-pp&quot; class=&quot;z-combobox-popup myCombo&quot; style=&quot;display:none&quot;&gt;
          &lt;ul id=&quot;nZEQo-cave&quot; class=&quot;z-combobox-content&quot;&gt;&lt;/ul&gt;
      &lt;/div&gt;
  &lt;/span&gt;
  </code></pre>
  <p>It put random id's to the html components.</p>
  <p><a href="http://zkfiddle.org/sample/3nmrpk4/1-Overriding-zk-combobox-style" rel="nofollow noreferrer">Fiddle with this particular part</a></p>
  <p>Some documentation:</p>
  <p><a href="https://www.zkoss.org/wiki/Small_Talks/2012/March/Customize_Look_and_Feel_of_ZK_Components_Using_CSS3_-_Part_2" rel="nofollow noreferrer">Customize Look and Feel of ZK Components Using CSS3 - Part 2</a></p>
  <p><a href="https://www.zkoss.org/wiki/ZK_Component_Reference/Input/Combobox" rel="nofollow noreferrer">ZK Component Reference&gt;Input&gt;Combobox</a></p>