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

Answer 1

Use the :empty pseudo to do the trick, e.g. to select ALL elements with no children (including no text nodes... nothing):

*:empty

Answer 2

I don't think this can be done with CSS alone. You would have to loop through all elements testing for a false return on hasChildNodes(). It would be sloppy and not something I would recommend.

Answer 3

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.