Vanilla JS Selector for an element that has a child element with a certain attribute

Question

I am trying to build a tab system. If I have the following HTML:

<div class="wizard-tabs">
  <ul>
    <li class="active"><a href="#" data-formstep="step1">Step 1</a></li>
    <li><a href="#" data-formstep="step2">Step 2</a></li>
    <li><a href="#" data-formstep="step3">Step 3</a></li>
  </ul>
</div>

How do I get the list item that has an anchor with a data-formstep attribute equal to a certain value? I am currently using this:

document.querySelector('.wizard-tabs > ul > li:has(a[data-formstep="'+newStep+'"])').classList.add("active")

But I am getting an error saying:

Failed to execute 'querySelector' on 'Document': '.wizard-tabs > ul > li:has(a[data-formstep="step1"])' is not a valid selector.

What am I doing wrong?

Answer 1

:has is an experimental technology, it currently has no support in any browser.

See https://developer.mozilla.org/en-US/docs/Web/CSS/:has (thanks to @jaromanda-x)

The fix: As Jaromanda said, just reference the <a> and then get it's .parentElement.

var li = document.querySelector('.wizard-tabs > ul > li >a[data-formstep="'+newStep+'"]').parentElement;

Answer 2

:has() as of 2017 is a non-standard jQuery selector only. Its status in the spec is unknown, no implementations exist, and you should not assume that it will ever be implemented until it is ready.

There is no equivalent to :has() in current selector syntax (which is the entire reason why it was added to the spec); your best bet is selecting the child element itself and using .parentElement to get its parent.

Answer 3

Here is a very rough polyfill for has() selector which would probably need more testings, but that can still be helpful:

(function() {

  // Can probably be improved
  // Will search for sequence ":has(xxx)" even if xxx contains other sets of func(yyy)
  function searchForHas(selector) {
    if (!selector) {return null;}
    const closed = [], valids = [], open = [], lastFour = ['', '', '', ''];

    selector.split('').forEach(char => {
      if (char == ')') {
        closed.push(open.pop()); // close the last open one
      }
      open.forEach(o => o.s += char); // add this char to all open ones
      if (char == '(') {
        open.push({
          s: ''
        }); // open a new one as an object so we can cross reference
        if (lastFour.join('') === ':has') {
          valids.push(open[open.length - 1]); // this one is interesting
        }
      }
      // update our ':has' sequence identifier
      lastFour.shift();
      lastFour.push(char);
    });
    if (!valids.length) {
      return null;
    } else {
      let str = selector.split(':has(' + valids[0].s + ')');
      return [str.shift(), valids[0].s, str.join('')]; // [pre, current_has, post]
    }
  }

  function has(that, sel_parts) {
    const matches = [...that.querySelectorAll(sel_parts[0])] // pre selector
      .filter(el => el.querySelector(sel_parts[1])); // which has one current_has
    return sel_parts[2] ? Array.prototype.concat.apply([], // if there is a post
      matches.map(el => [...el.querySelectorAll(':scope' + sel_parts[2])] // flatten all the matches
        .filter(el => !!el)
      )
    ) : matches;
  }
  // Overwrite the protos
  const dQS = Document.prototype.querySelector;
  Document.prototype.querySelector = function querySelector(selector) {
    const has_parts = searchForHas(selector);
    if (has_parts) {
      return has(this, has_parts)[0] || null;
    } else {
      return dQS.apply(this, [selector]);
    }
  };
  const dQSA = Document.prototype.querySelectorAll;
  Document.prototype.querySelectorAll = function(selector) {
    const has_parts = searchForHas(selector);
    if (has_parts) {
      let arr = has(this, has_parts);
      return arr && arr.length ? arr : null;
    } else {
      return dQSA.apply(this, [selector]);
    }
  };
  const eQS = Element.prototype.querySelector;
  Element.prototype.querySelector = function(selector) {
    const has_parts = searchForHas(selector);
    if (has_parts) {
      return has(this, has_parts)[0] || null;
    } else {
      return eQS.apply(this, [selector]);
    }
  };
  var eQSA = Element.prototype.querySelectorAll;
  Element.prototype.querySelectorAll = function(selector) {
    const has_parts = searchForHas(selector);
    if (has_parts) {
      let arr = has(this, has_parts);
      return arr && arr.length ? arr : null;
    } else {
      return eQSA.apply(this, [selector]);
    }
  };
})();

console.log(document.querySelector('.wizard-tabs > ul > li:has(a[data-formstep="step1"])'));
// and even
console.log(document.querySelector('li:has(a[data-formstep="step2"])>i'));

<div class="wizard-tabs">
  <ul>
    <li class="active"><a href="#" data-formstep="step1">Step 1</a><i data-s="1"></i></li>
    <li><a href="#" data-formstep="step2">Step 2</a><i data-s="2"></i></li>
    <li><a href="#" data-formstep="step3">Step 3</a><i data-s="3"></i></li>
  </ul>
</div>