title: Selecting Adjacent Sibling without intervening text nodes
body: <p>Due to a sad situation I receive HTML like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;Perform the following commands:
     &lt;code&gt;&amp;gt; cd /foo&lt;/code&gt;&lt;code&gt;&amp;gt; adb shell&lt;/code&gt;&lt;code&gt;# ps&lt;/code&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>and I need to make code like appear visually like:</p>
  
  <pre class="lang-none prettyprint-override"><code>Perform the following commands:
  &gt; cd /foo
  &gt; adb shell
  # ps
  </code></pre>
  
  <p>I thought I'd be tricky and use the <a href="http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors" rel="nofollow">CSS Adjacent Sibling Selector</a>:</p>
  
  <pre class="lang-css prettyprint-override"><code>code + code:before { content:'\A'; white-space:pre }
  </code></pre>
  
  <p>...but then I discovered that this applies even to something like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;If you go to your &lt;code&gt;C:\&lt;/code&gt; directory and run &lt;code&gt;dir&lt;/code&gt; …&lt;/p&gt;
  </code></pre>
  
  <p>Is there a CSS-only solution to select adjacent elements <strong>without intervening non-element nodes</strong>?</p>
  
  <p><em>If and only if there is not, feel free to suggest a JavaScript (including jQuery) solution.</em></p>