I run validate html/css on https://validator.w3.org/nu/ and get an CSS: Parse Error. Do you know how to fix it

Question

The code I put on https://validator.w3.org/nu/ and It show css parse error like that.

body:has(.quick__modal) { //CSS: Parse Error: )
  overflow: hidden;
}
.queries-item:not(:has(ul li)):hover { //CSS: Parse Error: :hover
  border-radius: 4px;
  background-color: #e8e9eb;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.queries-group .queries-item {
    padding: 0;
}
.queries-group .queries-item:has(ul li) ul { //CSS: Parse Error: ul
  background: #f8f8f8;
}

I have tried to google but no luck for me

Answer 1

This may be an issue with the validator. The CSS will pass with no errors if the has() pseudo-class starts with either a space or a combinator, as in body:has( .quick__modal) or body:has(>.quick__modal)

body:has( .quick__modal) {
  overflow: hidden;
}
.queries-item:not(:has( li)):hover {
  border-radius: 4px;
  background-color: #e8e9eb;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.queries-group .queries-item {
    padding: 0;
}
.queries-group .queries-item:has( ul li) ul {
  background: #f8f8f8;
}