Question

Suppose I have the following html:

This a test of <code>some code</code>.
<div class='highlight'>
    <pre>
        <code class='r'>
        </code>
    </pre>

</div>

How do I structure the CSS such that the <code> blocks inside div of class highlight have a different style than <code> that is not wrapped within a div of class highlight? For example, lets say I want them to have a different background color and use different fonts.

Answer 1

div.highlight code {
  /* highlight parent only styles go here */
}

div code {
  /* default div code styles here */
}

code {
  /* default code styles here */
}

Code styles will inherit up the tree shown, so anything in “code” will show up for “div code” AND “div.highlight code”, whereas code in “div code” will show up in “div.higlight code”, but NOT in a plain “code” element on its own.