CSS: :focus of elements within contenteditable

Question

If you have the following HTML:

<div contenteditable="true">
  <p>The first paragraph</p>
  <p>The second paragraph</p>
</div>

Is there a way to style the paragraph that is being edited differently from all other paragraphs in the div that is contenteditable?

div > p:focus { border: 1px solid red }

won't be applied to the paragraph being edited.

Here's a JSFiddle you can play with.

How can I style the paragraph being edited (the <p>-tag) differently?

I'd prefer a CSS-only solution, but perhaps I'll have to use JavaScript.

EDIT:

Since we could not find a pure CSS solution (and using :hover is not a real solution for me) I am now looking for some lines of JavaScript that set the attribute class="focus" on the node that is being edited.

Answer 1

I think I found a solution.

With the following code snippet you can get the parent element at the current caret position when the selection changes.

var selectedElement = null;
function setFocus(e) {
  if (selectedElement)
    selectedElement.style.outline = 'none';

  selectedElement = window.getSelection().focusNode.parentNode;
  // walk up the DOM tree until the parent node is contentEditable
  while (selectedElement.parentNode.contentEditable != 'true') {
    selectedElement = selectedElement.parentNode;
  }
  selectedElement.style.outline = '1px solid #f00';
};
document.onkeyup = setFocus;
document.onmouseup = setFocus;

Here I change the outline property manually but you could of course add a class attribute and set the style via CSS.

You still have to manually check if selectedElement is a child of our <div> with the contenteditable attribute. But I think you can get the basic idea.

Here's the updated JSFiddle.

EDIT: I updated the code as well as the JSFiddle to make it work in Firefox and Internet Explorer 9+, too. Unfortunately these Browsers do not have a onselectionchange event handler, so I had to use onkeyup and onmouseup.