Why doesn't the sibling selector work for contenteditable elements?

Issue

I've put together this pen: https://codepen.io/NanoSpicer/pen/YzQgQVd

The idea is that using the sibling selector I want to style a certain element when the element before the one I want to style is focused.

It works great with input elements, but it fails miserably when using elements with contenteditable attribute:

.container,
form {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

div[contenteditable="true"]::before {
  text-color: gray;
  opacity: 0.6;
  content: attr(placeholder);
}

div[contenteditable="true"],
input {
  /* remove system hightlighting*/
  outline-style: none;
  box-shadow: none;
  min-height: 40px;
  appearance: none;
  border: 3px solid;
  border-color: gray;
  border-radius: 6px;
}

div[contenteditable="true"]:focus,
input:focus {
  border-color: blue;
}

*:focus+* {
  border-color: red;
}

<form>
  <input placeholder="first" id="first" type="text">
  <input placeholder="second" id="second" type="password">
</form>
<div class="container">
  <div contenteditable="true" placeholder="first"></div>
  <div contenteditable="true" placeholder="second"></div>
</div>

Note: Tested on Firefox and Chrome.

Solution

That is very strange. Probably a bug.

This workaround is good for Firefox and Chrome on PC. Didn't test other browsers / platforms.

[contenteditable]:focus + * {
  border-color:green;
}

Answered By - Michael G