Is there a "multilayer" child selector?

Question

I want to find every Child-node of an element thats in the n-th position, eg. in:

<span class="passive match" id="1"></span>
<ul>
    <li>
      <span class="active match"></span>
      <ul>
        <li>
           <span class="active match"></span>
        </li>
      </ul>
    </li>
</ul>
<span class="passive match" id="2"></span>
<ul>
    <li>
      <span class="passive match"></span>
      <ul>
        <li>
           <span class="active"></span>
        </li>
      </ul>
    </li>
</ul>

I want to find both "active match" li Child of the ul next to the span "passive match"

Something like:

span.passive.match + ul:'has-Child'(span.active.match) {CSS here}

But the corresponding span.active.match can be a 3rd/6th/9th/12th etc. child-element from "passive match". Is there a CSS-Selector that can handle this or do I need to write a jQuery-Script that does it (which would be inefficient I'd say as I would need a recursive function that may run across 10k+ elements)?

Basically i have a tree filled with folders (.passive) and data (.active) and i want to display every data thats matched with a given filter (.match) and its path but want to hide every folder that has no child thats matching the filter. So the span with id="2" should be hidden, while the id="1" should show up in my dom structure. As the tree is generated by a plugin with private function and is used in multiple situation i cant just edit/ overwrite it but have to either use the CSS-Selectors to hide the unnecessary objects or use a javascript-script to do so. Maybe you'll have a better idea.

score 2 · Answer 1 · answered Jan 25 '19 at 11:43

For this you need the :has() pseudo-class…

span.passive.match + ul:has(span.active.match)

… but it is not a standard (it is in draft status) and no browser currently supports it.

In the meantime, alter your HTML so there is a class on the ul.

Ideally, do this when you generate the HTML, but you could modify it after the fact with JavaScript.

$(".active.match").parents("ul").addClass("contains-active-match");

span.passive.match + ul.contains-active-match {
  background: pink
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="passive match" id="1">a</span>
<ul>
  <li>
    <span class="active match">b</span>
    <ul>
      <li>
        <span class="active match">c</span>
      </li>
    </ul>
  </li>
</ul>
<span class="passive match" id="2">d</span>
<ul>
  <li>
    <span class="passive match">e</span>
    <ul>
      <li>
        <span class="active">f</span>
      </li>
    </ul>
  </li>
</ul>

This wouldnt work if my active.match is the 6th/ 9th child tho, right? — Grim, Jan 25 '19 at 11:52

Is there a "multilayer" child selector?

1 Answers1