:not(:empty) CSS selector is not working?

Handling input fields

The case of <input> elements present a unique scenario. As per the DOM, these elements are inherently empty, rendering the :not(:empty) selector ineffective. Instead, consider these alternatives:

• Use input[value=""] to apply styles to the inputs with an empty value attribute when the page loads.
• Apply input:not([value]) for inputs completely lacking a value attribute.

Leveraging placeholders

For styling based on the visibility of a placeholder, use the pseudo-class :placeholder-shown:

input:placeholder-shown {  /* spotlight on the placeholder */
  background-color: lightyellow; /* let's add a sunny touch */
}


Dynamic validation feedback

The pseudo-classes :valid and :invalid provide dynamic visuals on current input validity:

input:not([value=""]):not(:focus):invalid {
  border-color: red; /* alert, this doesn't look right! */
}


Styling with adjacent selectors

The + selector in CSS comes in handy when you need to style elements adjacent to an input:

input:invalid + .validation-message {
  display: block; /* Uh-oh, something's not right! */
}

input:valid + .validation-message {
  display: none; /* All's well that ends well */
}


Improved user experience

To ensure smoother visual transitions when an input gains focus or fails validation, CSS transitions work wonders:

input:focus, input:invalid {
  transition: border-color 0.3s ease-in-out; /* smooth as butter */
}


Advanced Insights

Importance of compatibility

Being cognizant about cross-browser compatibility is of utmost concern. Various browsers interpret empty elements differently. Cross-verify your implementation for the pseudo-classes on caniuse.com.

Utilizing JavaScript and DOM events

For a deeper level of control, JavaScript might be a better choice:

document.querySelector("input").addEventListener("input", function() {
  if(this.value) {
    // Apply styles when input is not empty
  } else {
    // Apply styles when input is empty
  }
});


Mutation Observers

DOM Mutation Observers could offer a more modular and efficient approach for environment-responsive styling over traditional mutation events.

Making use of required attribute

You can visually indicate required fields by blending the required attribute with CSS selectors:

input:required:invalid:not(:focus) {  /* not paying required 'attention' */
  border-color: red; /* painting the town red */
}
