title: CSS: :focus of elements within contenteditable
body: <p>If you have the following HTML:</p>
  
  <pre><code>&lt;div contenteditable="true"&gt;
    &lt;p&gt;The first paragraph&lt;/p&gt;
    &lt;p&gt;The second paragraph&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to style the paragraph that is being edited differently from all other paragraphs in the <code>div</code> that is <code>contenteditable</code>?</p>
  
  <pre><code>div &gt; p:focus { border: 1px solid red }
  </code></pre>
  
  <p>won't be applied to the paragraph being edited.</p>
  
  <p>Here's a <strong><a href="http://jsfiddle.net/PPNE2/" rel="noreferrer">JSFiddle</a></strong> you can play with.</p>
  
  <p>How can I style the <em>paragraph being edited</em> (the <code>&lt;p&gt;</code>-tag) differently? </p>
  
  <p>I'd prefer a CSS-only solution, but perhaps I'll have to use JavaScript.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Since we could not find a pure CSS solution (and using <code>:hover</code> is not a real solution for me) I am now looking for some lines of JavaScript that set the attribute <code>class="focus"</code> on the node that is being edited.</p>