Less中:has选择器同时包含img和video元素导致Webpack编译报错

我原本用以下Less选择器，给父元素中不含.hidden类的img标签设置样式：

&:has(img:not(.hidden)) 

现在想对同一父元素里的video标签实现完全相同的样式，尝试写了下面的选择器，但Webpack编译失败：

&:has(img:not(.hidden), video:not(.hidden))

Webpack抛出的报错信息：

ERROR in ./src/css/variables-light.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js??ref--4-2!./src/css/variables-light.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):

                    &:has(img:not(.hidden), video:not(.hidden)) {
                                        ^
Missing closing ')

请问有没有可行的方法把img和video元素放进同一个选择器里？

有两种可行的写法可以解决这个编译错误，同时实现需求：

1. 拆分:has()选择器
   将两个元素的条件拆分为独立的:has()选择器，用逗号分隔，Less编译器能正确解析这种写法：

&:has(img:not(.hidden)), &:has(video:not(.hidden))

这种写法会同时匹配包含非隐藏img的父元素，以及包含非隐藏video的父元素，最终效果和预期一致。

2. 使用:is()选择器包裹元素
   用:is()选择器把img和video统一包裹，再共同应用:not(.hidden)条件，这样能避免Less解析时的括号识别错误：

&:has(:is(img, video):not(.hidden))

:is()会让内部的所有元素都继承后面的:not(.hidden)规则，同时保证整个选择器的括号结构符合Less的解析要求。需要注意的是，:is()需要现代主流浏览器支持，目前大部分浏览器都已兼容该选择器。

内容的提问来源于stack exchange，提问作者shin