There are two `:has` selectors, but only one of them is active-CodePudding

How can I got activate the both of two :has selectors? If I comment out [1] then [2] works fine. However, if I uncomment [1] as it is then [2] does not work. I have tested this on Chrome-106.

.arrow {
  background-color: red;
}

#container:has(.to-mode-y:hover) .arrow:first-child {
  animation: flow_to_y 2s ease-in-out infinite alternate;
}

#container:has(.to-mode-x:hover) .arrow:last-child {
  animation: flow_to_x 2s ease-in-out infinite alternate;
}

@keyframes flow_to_y {
  0% {
    background-position: 0 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: 0 100%;
  }
}

@keyframes flow_to_x {
  0% {
    background-position: 0 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: 0 100%;
  }
}

<div id="container">
  <button >Mode X</button>
  <div>
    <div >keyboard_double_arrow_down</div>
    <div >keyboard_double_arrow_up</div>
  </div>
  <button >MODE Y</button>
</div>

CodePen

CodePudding user response：

This is a regression of 106 and it was just fixed. (https://crbug.com/1368863) The fix will be applied to 108. Thanks for the report!