htmlcssvalidationparse-error

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


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


Solution

  • 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;
    }