Using JS's querySelector to find a div that does not has any descendant child

Question

Suppose the website contain several div elements, some of which has a img child, while some don't. Is it possible to select those who possess a img child in one single querySelector statement? What if it is grandchild?

Is it do-able via the :not() pseudo-selector?

"No". You need a ":contains()" selector, that supports DOM nodes, not text. See http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar — Matt, May 25 '13 at 12:51
[`:empty`](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty) might be suitable for your very specific case. — Rob W, May 25 '13 at 12:51

score 2 · Accepted Answer · answered May 25 '13 at 13:03

It is not possible using only one querySelectorAll statement, but you can loop through the divs having img childs and use the result NodeList to get the parent divs:

var imgs = document.querySelectorAll("div > img"),
    divs = [];
for (var i = 0; i < imgs.length; i++) {
    divs.push(imgs.parentNode);
}

Using JS's querySelector to find a div that does not has any descendant child

1 Answers1