当contenteditable具有焦点时，更改另一个元素的样式

Question

I want to change the style of another element when a contenteditable div has focus as shown below:

 [contenteditable="true"]:focus .testClass { background-color: black; } 

 <div contenteditable="true">Hello World</div> <button class="testClass">Test</button> 

Unfortunately the above isn't working, I have tried the following CSS also:

[contenteditable="true"]:focus + .testClass {
[contenteditable="true"]:focus > .testClass {
[contenteditable="true"]:focus, .testClass {

Using [contenteditable="true"]:focus on its own works fine to style the editable div when focus is applied, but none of these work to style another element at the same time. Is this possible to do?

Answer 1

Is this what you want:

 [contenteditable="true"]:focus { background-color: black; } 

 <div contenteditable="true">Hello World</div> <button class="testClass">Test</button> 

Or this (you mentioned you've tried it, but it does work):

 [contenteditable="true"]:focus + .testClass { background-color: black; } 

 <div contenteditable="true">Hello World</div> <button class="testClass">Test</button> 

Here some reading on CSS selectors: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Answer 2

You need to use ~ . It's the general sibling selector which separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent. Check this:

[contenteditable="true"]:focus ~ .testClass {
     background: red;
}

---

 [contenteditable="true"]:focus ~ .testClass { background: red; } 

 <div contenteditable="true">Hello World</div> <button class="testClass">Test</button> 

More about the general sibling selector can be read over here .

Answer 3

[contenteditable="true"]:focus ~ .testClass will do the job as Fahad Hasan said

The ~ symbol means the first element right after ( not child )

Answer 4

you can change the style of .textClass when your div has focus, by using jquery:

$("div[contenteditable=true]").focusin(function () {

    $(".testClass").css({
        "background-color": "black",
    });

});