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

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.

CSS selector for label without child elements

One solution would be adding a class to the element and using CSS to format it accordingly.

label.empty {
white-space: nowrap;
}


Link to the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

The other comment points to using :empty but in your case the <label> contains some text and doesn't apply as empty

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

CSS pseudo-class like :empty , but also ignores hidden children

CSS selection is a one-directional tree. Once you get down to the children, you can no longer act on the parent.

You need to check for the display: none; property on all the children to know if they are all hidden or not. You can select all hidden children like so: <parent tag> *[display=none]. However, there's no way to know if all the children are hidden and there's no way to re-select the parent once you've identified the hidden children.

In order to accomplish this, you will need to use JavaScript. See this: Check if all children elements are hidden

Is there a selector or a work around to select any element with no children

As a text node is also a node for CSS you cannot do it with any CSS selector. Doing it with JavaScript you should first select all nodes with only one child and than test if it is only a text node.

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

How to find last/first not empty child using only CSS?

I'm pretty sure I've found the solution that works every time and in every possible case here: https://jsfiddle.net/4ktq3d3u/1 :)

HTML

<div>
    <span></span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span></span>
    <span>4</span>
    <span></span>
    <span>5</span>
    <span><span>
</div>

CSS

span:not(:first-child):not(:empty)::before {
    content: ', ';
}

span:empty + span:not(:empty)::before {
    content:''  
}

span:not(:empty) ~ span:empty + span:not(:empty)::before {
    content:', '
}

---

Related Topics