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

Share Improve this question Follow edited Nov 20, 2024 at 7:49 Temani Afif 274k2828 gold badges365365 silver badges485485 bronze badges asked Nov 20, 2024 at 7:45 aehardingaeharding 59811 gold badge44 silver badges1818 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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>