css

Why doesn't CSS nesting appended nesting selector work within pseudoselectors?

Why is the first div red, but not the other? If you enable SCSS preprocessor in the pen, both divs are red as expected.

https://codepen.io/aeharding/pen/wvVLBZg

.regular {
  html & {
    color: red;
  }
}

.pseudo:before {
  content: '(pseudo) style me red';

  html & {
    color: red;
  }
}
<div class="regular">(regular) style me red</div>

<div class="pseudo"></div>

Solution

  • It's by design but it may change in the future: https://github.com/w3c/csswg-drafts/issues/7433

    From the actual Specification:

    The nesting selector cannot represent pseudo-elements