: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>

Answer 1

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

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

 <input placeholder="placeholder"/> <button>hi there</button>

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; }

 <input placeholder="placeholder" /> <button>hi there</button>