:Not(:Empty) CSS Selector Is Not Working

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

Being a void element, an <input> element is considered empty by the HTML definition of "empty", since the content model of all void elements is always empty. So they will always match the :empty pseudo-class, whether or not they have a value. This is also why their value is represented by an attribute in the start tag, rather than text content within start and end tags.

Also, from the Selectors spec:

The :empty pseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness;

Consequently, input:not(:empty) will never match anything in a proper HTML document. (It would still work in a hypothetical XML document that defines an <input> element that can accept text or child elements.)

I don't think you can style empty <input> fields dynamically using just CSS (i.e. rules that apply whenever a field is empty, and don't once text is entered). You can select initially empty fields if they have an empty value attribute (input[value=""]) or lack the attribute altogether (input:not([value])), but that's about it.

:empty doesn't work if there's blank spaces?

As the others mentioned, this isn't possible with CSS yet.
You can check to see if there's only whitespace with JavaScript however. Here's a simple JS only solution, "empty" divs that match are blue, while divs that have text are red. Updated to add an empty class to the empty divs, which would allow you to target them easily with the selector .empty in your CSS.

The JS only "empty" comparison would look like this:

if(element.innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "")

And if you're using jQuery it would be a bit easier:

if( $.trim( $(element).text() ) == "" ){

var navs = document.querySelectorAll(".nav-previous");for( i=0; i < navs.length; i++ ){  if(navs[i].innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") {    navs[i].style.background = 'blue';    navs[i].classList.add( 'empty' );  } else {    navs[i].style.background = 'red';  }}

.nav-previous { padding: 10px; border: 1px solid #000;}
.nav-previous.empty {  border: 5px solid green;}

<div class="nav-previous">                            </div><div class="nav-previous">Not Empty </div>

CSS Selector for No-Children-But-Not-Empty

You can follow this approach. Style the code elements by whatever CSS you want and then reset those CSS styles which are inheritable in anchor's styles i.e.:

Demo: http://jsfiddle.net/GCu2D/1062/

CSS:

code {
    color: green;
    font-weight: bold;
}
code a{
    color: red;/*Reset any inheritable css*/
    font-weight: normal; /*Reset any inheritable css*/
}

You might not need to reset all styles because not all styles are inherited by anchor from the code element

This is one solution which you can really consider.

the css selector :empty for tr td is not working

you can achieve it as follows:

#wp-calendar tr td.pad:not(:empty) {
    border:none !important;
    background-color: rgba(255,255,255,0.04);
}

if you want to apply some style in case of empty. try following:

#wp-calendar tr td.pad:(:empty) {
   /* some style */
}

:not(:empty) with space in CSS

You cant

(unfortunately)

The :empty selector is the only way in CSS of detecting content, and also proves positive for whitespace:

The :empty pseudo-class represents any element that has no children at
all. Only element nodes and text (including whitespace) are
considered. Comments or processing instructions do not affect whether
an element is considered empty or not.

Dont forget about the separation of concerns, HTML for content, CSS for styling and JS for functionality - as such, you either need to remove the whitespace from your HTML (content) or apply a class depending on its presence, or strip it using JS (functionality).

With that said, elements only containing whitespace should collapse by default, so long as the space in question isnt a non-breaking space

Demo Fiddle

Workaround for :empty Selector Not Being Updated When Children Added in IE11

Pretty sure I'd seen this before, but I can't find the previous question anymore so I'll take a stab at it.

This looks like a typical repaint bug: IE will understand your CSS just fine... if the list starts out with items, and if you write a function to empty the list instead, it will not update the button either. Unfortunately, repaint bugs aren't known for having pure CSS workarounds.

Fortunately, they don't usually need them. Since this only happens when you change the DOM, you can easily work around this within the JS, and it doesn't take very many lines. It looks like removing the list itself first, before inserting the new item, then putting the list back in resolves this issue whilst not creating any problems in other browsers:

function AddListItem()
{
    var mylist = document.getElementById("mylist");
    if (!mylist)
        return;

    var parent = mylist.parentElement;
    var button = mylist.nextElementSibling;
    parent.removeChild(mylist);

    var li = document.createElement("li");
    li.appendChild(document.createTextNode("Hello, world!"));
    mylist.appendChild(li);

    parent.insertBefore(mylist, button);
}

Tested on IE11 on Windows 7, Windows 8.1, and Windows 10 RTM (build 10240), and Microsoft Edge on Windows 10 RTM. Note that removing the list after inserting the item (right before putting it back in) does not work; you will need to remove it first.

:Not(:Empty) CSS Selector Is Not Working