In CSS why does the :Empty pseudo-classes work and the :not(:Empty) do not work in the input?

Question

I’m trying to make a form template where I think better of the user experience giving visual feedback when the field is filled. Then I came across a "problem" that I can’t explain...

Because in the input the pseudo class :empty works, but the :not(:empty) does not work? Already in the div both work perfectly.

To illustrate what I speak follow the code. Note that the input is always red, even if it has content in it. Already in the div works perfectly.

input:empty {
	border: 2px solid red;
}
input:not(:empty) {
	border: 2px solid green;
}

div:empty {
	border: 2px solid red;
}
div:not(:empty) {
	border: 2px solid green;
}
div {
	width: 100px;
	height: 30px;
}

<input type="text">
<input type="text" value="content">
<div></div>
<div>content</div>

Answer 1

The input element is part of the void elements. The void elements are those that do not have a closing tag in their specification, for example <img> or <hr>. Then these void elements will always be considered empty, even containing attributes like value or placeholder.

The pseudo selector :empty will be matched in:

<div></div>

<div><!-- test --></div>

But it won’t work in:

<div> </div>

<div>
  <!-- test -->
</div>

<div>
</div>

You can try to give feedback to the user in other ways. One of them would be to use the selectors :valid and :invalid to display colors in order to catch the user’s attention.

References:

https://www.w3.org/TR/selectors/#Empty-pseudo

https://www.w3.org/TR/html5/syntax.html#void-Elements

https://css-tricks.com/almanac/selectors/v/valid/

https://css-tricks.com/almanac/selectors/i/invalid/