13

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

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Amit Joki
  • 58,320
  • 7
  • 77
  • 95

2 Answers2

31

:not(pre) > code { … } should do the job, iff the code element is a direct child of the pre element.

  • That is highly inefficient, and will lag quite a bit if you have a lot of reflows on the page. – Madara's Ghost May 25 '14 at 09:39
  • Perhaps, but what you suggest is hardly future proof. – Madara's Ghost May 25 '14 at 09:41
  • @SecondRikudo My site is not going to be a code sharing or code intense one, and the structure of HTML can be guranteed. Will using this answer still have huge performance implications? – Amit Joki May 25 '14 at 09:42
  • 2
    @Second Rikudo: Why is it highly inefficient? Given most implementations this at most adds an extra check to any existing `code` elements that are already being evaluated anyway. – BoltClock May 25 '14 at 09:43
  • Nope, it's completely valid, however, you don't know what the future might store. – Madara's Ghost May 25 '14 at 09:43
  • Try it and see if it’s too slow. We cannot judge this without your complete structure and setup, browser and other specs. Profile profile profile. –  May 25 '14 at 09:44
  • @rightfold, It seems BoltClock's right. So, bravo to your answer. I can remove the `>` if it isn't direct child. – Amit Joki May 25 '14 at 09:49
  • 1
    @Amit Joki: Actually, if it may not always occur as an immediate descendant, you'll end up with a whole new set of problems. See http://stackoverflow.com/questions/20869061/is-the-css-not-selector-supposed-to-work-with-distant-descendants – BoltClock May 25 '14 at 09:50
  • @BoltClock, fortunately, It does occur as immediate descendant. BTW, HTH do you know the internals of CSS? Are you kinda a part of CSS spec team? – Amit Joki May 25 '14 at 09:54
  • @Amit Joki: Nope, wish I was though. I just have an uncanny talent for understanding the CSS spec I guess. – BoltClock May 25 '14 at 09:56
  • you sure have @BoltClock. – Amit Joki May 25 '14 at 09:57
4

There is no parent selector in CSS. Your only choice is to make style that apply for both for the ones without the <pre> parent, and override those rules with the <pre> selector:

code { color: red; }
pre code { color: blue; } /* More specific, so will override the first! */

Alternative solutions include JavaScript.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • The question does not call for a parent selector; rather, a child selector (like `pre code`). And there is a direct solution, described by @rightfold. However, the workaround suggested here has some benefits, like comprehensive browser support (as opposite to almost comprehensive) and the possibility of using both child and descendant selectors (e.g. `pre > code` or `pre code`). On the other hand, it requires that some explicit setting be used for those `code` elements that are not inside `pre` elements. – Jukka K. Korpela May 25 '14 at 13:18