Is there a selector or a work around to select any element with no children_问答_开发者

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

开发者 https://www.devze.com 2022-12-31 09:07 出处：网络

Looking at the CSS3 specs, I can\'t find any way to select any element that has no children. Let me explain.

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.

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

*:empty

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.