css Question posted in
Some basic documentation can be found here.

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>
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0 
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search