:is() & :where() use cases

[ffoodd]

Looks familiar, isn't it? Formerly known as :any(), it came back from outterspace as :matches().

And it starts to be pretty well supported.

[ffoodd]

Be careful with specitify and -*-:any()'s old versions: there's a dedicated issue in AutoPrefixer.

[ffoodd]

FWIW, current W3C draft specification.

[ffoodd]

For now on, I can't think about a test that wouldn't be writable without :matches(), so for an extended browser support we won't use this until it's fully supported on major browsers stable releases.

However I already found some tests which would be shorter with it. Be careful with this, since ending a selector with a :matches() pseudo-class is not good for performances.

Errors

Nested interactive elements

:matches(a, button) :matches(a[href], audio[controls], video[controls], button, details, embed, iframe, img[usemap], label, select, textarea, input[type]:not([hidden]))

[width] & [height] attributes

:not(:matches(img, object, embed, svg, canvas)):matches([width], [height])

Table used for layout

table[role="presentation"] :matches(th, thead, tfoot, caption, colgroup, [axis], [scope], [headers])

Button not submitting

button:matches([type="reset"], [type="button"]):matches([formmethod], [formaction], [formtarget],[formenctype], [formnovalidate])

Missing a value

input:matches([type="reset"], [type="button"]], [type="submit"]):not([value]):not([title]):not([aria-label]):not([aria-labelledby])

Missing source for img

:matches(img, input[type="image"]):not([src]):not([srcset]),
:matches(img, input[type="image"]):matches([src=""], [src=" "], [src="#"], [src="/"]),
:matches(img, input[type="image"]):matches([srcset=""], [srcset=" "], [srcset="#"], [srcset="/"])

Missing alternative for img

:matches(img, area, input[type="image"]):not([alt]),
:matches(img, area, input[type="image"]):matches([alt=" "])

Warnings

Invalid nesting in a list

:not(ul):not(ol) > li,
:matches(ul, ol) > :not(li)

The same for defintion list, obvisouly.

Misplaced div

:matches(b, i, q, em, abbr, cite, code, span, small, label, strong) div

[alt] containing file name

:matches(img, area, input[type="image"], embed[type="image"], object[type="image"]):matches([alt$=".pdf"], [alt$=".doc"], [alt$=".png"], [alt$=".jpg"], [alt$=".gif"]

Note: I shortened filename list :)

I won't do all of them but it would be pretty easy :)

[ffoodd]

According to the MDN browser compatibility table, I think we gotta go :)

[ffoodd]

Uh oh, :matches() has been renamed as :is() → https://github.com/w3c/csswg-drafts/issues/3258

[ffoodd]

:where() can also help a lot, at least to lower specificity in some cases. Read Manuel Matuzovic's "Here’s what I didn’t know about :where()".