CSS nesting and pseudo elements

I don't know if I'm making a syntax goof somewhere, but I would have thought that

&::after {
  :hover > & {
    color: red;
  }
}

&::after {
  :hover > & {
    color: red;
  }
}

would be the same as

:hover > &::after {
  color: red;
}

:hover > &::after {
  color: red;
}

but, I am wrong. Is there anyway of using :hover selector inside of a ::after style declaration, to target the :hover state of the parent element?

1 Reply

Pete (he/him)OP•2mo ago

nvmd found issue in the csswg repo https://github.com/w3c/csswg-drafts/issues/7433

GitHub

[css-nesting] How to resolve nested CSS with pseudo elements in the...

first reported here : csstools/postcss-plugins#510 relevant specification parts: https://www.w3.org/TR/css-nesting-1/#nest-selector The nesting selector can be desugared by replacing it with the pa...

Gaming

Programming

CSS nesting and pseudo elements

Did you find this page helpful?