How to style contenteditable=true when hovered?

Question

I want to change background of elements inside a div, only when hovered and when their property contenteditable is true.

I have tried :

#myDiv[contenteditable="true"]:hover  { background-color: rgba(217, 245, 255,0.5);}

But it doesn't work. And if I move the pseudo class to the div :

#myDiv:hover [contenteditable="true"]  { background-color: rgba(217, 245, 255,0.5);}

Then all fields with contenteditable=true get the background... any trick to fix that in pure css ?

EDIT : HTML example:

<div id="myDiv">
    <span contenteditable="true">blabla</span>
    <div "subdiv" contenteditable="true">blibli</div>
</div>

Answer 1

This will select all direct children of .myDiv with [contenteditable="true"]

.myDiv:hover > *[contenteditable="true"] {
  background-color: rgba(217, 245, 255,0.5);
}

<div class="myDiv">
  <p contenteditable="true">Lorem ipsum dolor sit amet.</p>
  <span contenteditable="true">Lorem ipsum dolor.</span>
  <p contenteditable="false">Lorem ipsum dolor.</p>
</div>