I'm using element attributes to identify a tree-like structure in the DOM and each node that branches looks after its children. It does so by searching descendents of the node in the DOM and checking for the attribute that identifies another node. It needs to do this since the child nodes might be several layers deeper in the DOM.

I'm currently doing this with the following JS:

const directChildNodes = [...nodeElement.querySelectorAll(`[tree-node-name="${this.treeName}"]`)]
  // filter all results where the current node is the closest parent
  .filter((el: Element) =>
    el.parentElement?.closest(`[tree-node-name="${this.treeName}"]`) === this.host.nativeElement);

This works, but is not very efficient as it grabs all elements with the attribute and then filters out ones that don't identify the current node as the closest parent. I would ideally be able to achieve this in the CSS selector.

I've tried the following selector but this does not seem to work:

nodeElement.querySelectorAll(
  `[tree-node-name="${this.treeName}"]:not([tree-node-name="${this.treeName}"] [tree-node-name="${this.treeName}"])`
)]

Any suggestions would be great, thanks!