:has is an unforgiving selector

A little episode happened while publishing the CSS :has() selector to the Yearbook. I initially described :has() as a "forgiving" selector, which means that anything in its parameters will be evaluated even if one or more of the items are invalid.

/* 示例：请勿使用！*/
article:has(h2, ul, ::-scoobydoo) { }

Did you see ::-scoobydoo? This is completely invalid. A forgiving selector list ignores the invalid selector and continues to evaluate the rest of the items as written like this:

article:has(h2, ul) { }

In the draft before May 7, 2022, :has() is indeed a tolerant selector. But after reporting a problem, things changed, which states that when :has() contains complex selectors (e.g. header h2 p), its tolerance nature conflicts with jQuery. W3C found a solution a few weeks ago, to be formulated as a "non-forgiving" selector. :has()

So, our previous example? The entire selector list is invalid because the invalid selector is invalid. But the other two tolerance selectors

and :is() remain the same. :where()

There is a workaround for this. Remember that

and :is() are forgiving, even if :where() is not. This means we can nest either of these two selectors in :has() for more tolerant behavior: :has()

article:has(:where(h2, ul, ::-scoobydoo)) { }

which one you use may be important because the specificity of

is determined by the most specific items on its list. Therefore, if you need something less specific, it is best to use :is() as it does not increase the specificity score. :where()

/* 特异性：(0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { }

/* 特异性：(0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

We have updated some posts to reflect the latest information. I've seen a lot of other things that need to be updated in the wild, so this is a small public service announcement for anyone who needs to do the same.

The above is the detailed content of :has is an unforgiving selector. For more information, please follow other related articles on the PHP Chinese website!