:not(:placeholder-shown) is not working with Adjacent sibling combinator

Question

Hi:) I'm trying to run the simplest example of :not(:placeholder-shown) and its not workings.Here is a link to my codepen. https://codepen.io/yael-screenovate/pen/eYJEqRB?editors=1100 what did i do wrong? thanx by advance. Heres the code:

button {
  display: none;
}

input:not(:placeholder-shown)+button {
  display: block;
}

<div>
  <input/>
  <button>hi there</button>
</div>

button {
  display: none;
}

input:not(:placeholder-shown)+button {
  display: block;
}

user_104380 · Answer

It's because you didn't set any placeholder attribute.

button {
  display: none;
}

input:not(:placeholder-shown)+button {
  display: block;
}

It makes more sense not to use the :not but do the whole logic the opposite:

button {
  display: block;
}

input:placeholder-shown+button {
  display: none;
}