All geek questions in one place

Is there a selector or job to select any item without children

Looking at the CSS3 specs, I cannot find a 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 am looking for CSS syntax to select h1, two h2 and two p. The method of choice on any page, all elements without children. Any suggestion?

Sorry, I forgot to add the "empty" part, I actually already use the *: empty selector, but it does not work for any tag that has nodeText as a child. Therefore, it works for any input, image, object, but not for h2, h1 or any p.

+4
source share
3 answers

As text node is also a node for CSS, you cannot do this with any CSS selector. When doing this with JavaScript, you must first select all nodes with only one child node, and not with a test if it is just text node.

+1
source

Use the alias :empty to do the trick, for example. to select ALL elements without children (including text nodes ... nothing):

 *:empty
0
source

I do not think that this can only be done using CSS. You will need to go through all the element checks to falsely return on hasChildNodes() . That would be messy and not what I would recommend.

0
source

Source: https://habr.com/ru/post/1310103/

More articles:


All Articles