Why am I getting a parse error using the :has pseudo-class?

Question

When I use the W3C CSS Validation Service on the following CSS code, I get a Parse Error ")". The error doesn't seem to be impacting the functionality. Any help is greatly appreciated.

footer:has(.footer-cards:hover) 
{
  overflow-y: visible;
}

.footer-cards {
  height: 400px;
  background: #062e67;
  padding-inline: 20px;
  border-radius: 10px;
}

.footer {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

Answer 1

Validators have bugs. Apparently when parsing the :has() pseudo-class, the validator expects an initial combinator inside the brackets, when none is actually required.

See these bug reports relating to the validator: .

This selector validates as correct:

footer:has(>.footer-cards:hover) 

But don’t necessarily change your code to this, because this rule would now only match .footer-cards which are direct children of footer.