Как переключить цвет фона div на основе имени класса и contenteditable значения

Question

Я хочу изменить цвет фона div на основе имени класса 'cls-editable', которое используется javascript для поиска элемента, а затем установить для редактируемого атрибута значение 'true' или 'false.

При редактировании фон имеет желтый цвет. В противном случае он белый.

HTML

<div class='cls-editable'>
  Hello
</div>


CSS:

.cls-editable, [contenteditable="true"] {
   background-color: yellow;
}

.cls-editable, [contenteditable="false"] {
   background-color: white;
}


Javascript:

if (this.checkStatus) {
  $('.dirs_row').children('.cls-editable').each(function () {
    $(this).attr('contenteditable', 'true');
  });
} else {
  $('.dirs_row').children('.cls-editable').each(function () {
    $(this).attr('contenteditable', 'false');
  });
}

Но он не работает. Что не так с CSS?

Answer 1

Попробуйте это

CSS

.cls-editable[contenteditable="true"] {
   background-color: yellow;
}

.cls-editable[contenteditable="false"] {
   background-color: white;
}

ВЫХОД

Answer 2

Вы поняли это почти правильно! Вот правильное решение:

.cls-editable[contenteditable="true"] {
   background-color: yellow;
}

.cls-editable[contenteditable="false"] {
   background-color: white;
}

<div class='cls-editable' contentEditable="true">
  Hello
</div>
<div class='cls-editable' contentEditable="false">
  Hello
</div>