title: CSS: Does the plus sign work with pseudo elements?
body: <p>For markup similar to this:</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;hello world&lt;/p&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;h4&gt;hello world&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can you do something like this in CSS:</p>
  
  <pre><code>div:after {
     content: "";
     display: block;
     border-bottom: 2px solid red;
  }
  p + div:after {
     content: "";
     display: block;
     border-bottom: 2px solid blue;
  }
  </code></pre>
  
  <p>...meaning to say "Give all :after pseudo elements immediately following a <code>&lt;p&gt;</code> a blue border. Give all others a red border".</p>
  
  <p>This <a href="http://jsfiddle.net/medtg77e/" rel="nofollow">doesn't seem to work</a>. I realize this is because the + sign is applying to the 'div' selector, not the 'div:after' selector as a whole.  But is there another way to target these in CSS (without adding a new class specific to these instances and without manipulating the DOM)?</p>