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

.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>

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>

• css

2 Answers 2

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

From the actual Specification:

The nesting selector cannot represent pseudo-elements

.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>