How can I style <code> only if its parent is not <pre>?
css, css-selectors, html
Solution
`:not(pre) > code { … }` should do the job, iff the `code` element is a direct child of the `pre` element.
Problem
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