title: How can I style <code> only if its parent is not <pre>?
body: <p>I'm integrating wmd-editor like the one used here.</p>
  
  <p>For inline code blocks like <code>this one</code>, the html generated is:</p>
  
  <pre><code>&lt;code&gt;this one&lt;/code&gt;
  </code></pre>
  
  <p>For multiline code like:</p>
  
  <pre><code>var i = 0;
  var j = 0;
  </code></pre>
  
  <p>The html generated is:</p>
  
  <pre><code>&lt;pre&gt;
    &lt;code&gt;var i = 0;&lt;/code&gt;
    &lt;code&gt;var j = 0;&lt;/code&gt;
  &lt;pre&gt;
  </code></pre>
  
  <p>I've separate css for them: <code>pre{ ... }</code> and <code>code{ ... }</code></p>
  
  <p>Now, I want <code>&lt;code&gt;</code> style to be applied only if its parent isn't <code>&lt;pre&gt;</code>.</p>
  
  <p>I've tried using <code>code:not(pre code){ ... }</code> but it didn't seem to work.</p>
  
  <p>I can guarantee the HTML structure above.</p>
  
  <p>Can it be solved through css?</p>
  
  <p><a href="http://jsfiddle.net/RXLpd/" rel="noreferrer"><strong>Fiddle</strong></a></p>