Question

Due to a sad situation I receive HTML like this:

<p>Perform the following commands:
   <code>&gt; cd /foo</code><code>&gt; adb shell</code><code># ps</code>
</p>

and I need to make code like appear visually like:

Perform the following commands:
> cd /foo
> adb shell
# ps

I thought I’d be tricky and use the CSS Adjacent Sibling Selector:

code + code:before { content:'\A'; white-space:pre }

…but then I discovered that this applies even to something like:

<p>If you go to your <code>C:\</code> directory and run <code>dir</code> …</p>

Is there a CSS-only solution to select adjacent elements without intervening non-element nodes?

If and only if there is not, feel free to suggest a JavaScript (including jQuery) solution.

Answer 1

This works:

$('code').each(function() {
    var prev = this.previousSibling;
    var next = this.nextSibling;
    if ((prev && prev.tagName === 'CODE') ||
        (next && next.tagName === 'CODE')) {
        $(this).addClass('block');
    }
});​

Then in your CSS use the .block selector to add display: block and any other desired styles to the matched elements.

demo at http://jsfiddle.net/alnitak/JYzGg/

It would be pretty easy to code this as pure Javascript if you don’t already have jQuery loaded – jQuery just happens to make adding the class easier than pure JS if you should have other class names already on those elements.