Using :focus with nested contenteditable elements

Question

I am trying to make an application to edit documents using contenteditable. I would like to apply a :focus state to an element, like this:

.focus:focus {
color: red;
}

However, this doesn't appear to work when the element is nested in another contenteditable element. If I have some html like this, it works:

<span contenteditable class="focus">content</span>

But if I do something like this, it doesn't work:

<div contenteditable>
<span contenteditable class="focus">content</span>
</div>

For the purposes of how I am using this, I need the outer contenteditable element. I would prefer to use css only for this. Is there a workaround for this?

Demo

I don't want the :focus to apply to the div, though. I want it to apply to the span with the "focus" class. Also, if I change the span in the working example to a div, it still works. — firefoxuser_1, Mar 07 '15 at 21:43

score 1 · Answer 1 · answered Mar 07 '15 at 21:59

1

Will this work for you? http://jsfiddle.net/tdovuyyr/2/

div:focus span {
    color: white;
    background: green;
}

answered Mar 07 '15 at 21:59

Stickers

75,527
23
147
186

Possibly. The div contains multiple spans, and I'd prefer to only highlight the span the user is actually typing in. I guess if I don't find a better solution I'll use this. – firefoxuser_1 Mar 07 '15 at 22:01
Do you really need the contenteditable on the div in the first example? – Stickers Mar 07 '15 at 22:06
Yes, I do, because there are other things in that div besides the span. – firefoxuser_1 Mar 07 '15 at 22:07
OK, check out this post http://stackoverflow.com/questions/16832749/css-focus-of-elements-within-contenteditable – Stickers Mar 07 '15 at 22:20

score 1 · Accepted Answer · answered Mar 07 '15 at 22:30

In the end, I added a wrapper element around the spans that cannot be contenteditable. This makes the focus work correctly.

<div contenteditable>
<span contenteditable="false">
<span contenteditable class="focus">content</span>
</span>
</div>

I don't like this solution very much, but I also don't want to add a lot of javascript to this.

Using :focus with nested contenteditable elements

2 Answers2