Query selector for element having specific child

Question

Soo basically I want to select element which has specific child elements. For now I have selector which selects the child element of a chain:

const el = document.querySelector('#leftMenu ul > li > a:not(.active) + ul > li.active')

Now to get the element I'm interested in i have to do this:

const x = el.parentNode.parentNode;

Is there any way to get this element staight from the selector itself?

if you'd use jQuery syntax, it could be possible to get it in one line. — Banzay, Feb 13 '17 at 11:55
True, life would be so much easier :) But unfortunately I can't use jquery. — J33nn, Feb 13 '17 at 12:10

vsync · Answer 1 · 2023-01-13T19:27:13.623

3

In Chrome 105+ you can use the :has pseudo selector:

document.querySelector(`a:has(b)`).style.color = 'red'

<a>1</a>
<a><b>2</b></a>
<a>3</a>

edited Jan 13 '23 at 19:27

answered Aug 31 '22 at 08:50

vsync

118,978
58
307
400

score 1 · Answer 2 · edited May 23 '17 at 10:29

1

There is no parent selector,
However it should be available in CSS level 4, which is a long way from being implemented.

So, the best thing you can do is to add in one line:
const el = document.querySelector('#leftMenu ul > li > a:not(.active) + ul > li.active').parentNode.parentNode;

edited May 23 '17 at 10:29

Community

1
1

answered Feb 13 '17 at 11:43

pol

2,641
10
16

Wow, didn't think of it... Like seriously man, it doesn't even partially answering my question. Ok after edit at least it contains some meaningful information. – J33nn Feb 13 '17 at 11:46
@pol, this is actually pretty smart. – Pacerier Apr 24 '20 at 06:08

score 1 · Answer 3 · edited May 23 '17 at 11:47

1

Currently, there is no way to select a parent (i.e. an element with specified children). See Is there a CSS parent selector?

There may be one in the future, but currently, your method looks like the best solution.

edited May 23 '17 at 11:47

Community

1
1

answered Feb 13 '17 at 11:49

Soma Deáki

11
1

Query selector for element having specific child

3 Answers3