Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I style <code> only if its parent is not <pre>?

Tags:

I'm integrating wmd-editor like the one used here.

For inline code blocks like this one, the html generated is:

<code>this one</code>

For multiline code like:

var i = 0;
var j = 0;

The html generated is:

<pre>
  <code>var i = 0;</code>
  <code>var j = 0;</code>
<pre>

I've separate css for them: pre{ ... } and code{ ... }

Now, I want <code> style to be applied only if its parent isn't <pre>.

I've tried using code:not(pre code){ ... } but it didn't seem to work.

I can guarantee the HTML structure above.

Can it be solved through css?

Fiddle