Looking at the CSS3 specs, I can’t find any way to select any element that has no children.
Let me explain.
<body>
<h1>Main Page</h1>
<div id="main">
<div class="post">
<h2>Article 1</h1>
<p>some text</p>
</div>
<div class="post">
<h2>Article 2</h1>
<p>some text</p>
</div>
</div>
</body>
I’m looking for a CSS syntax to select the h1, the two h2 and the two p. A way to select in any page, all elements with no children.
Any suggestion ?
Sorry, I forgot to add the “empty” part, I am actually already using the *:empty selector, but it’s not working for any tag that has a nodeText as a child. So it’s working for any input, image, object, but not for h2, h1, or any p.
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.