MENU


at root

You can use the @at-root directive to bring a nested selector out to the document root.
You may choose whether to move out of the nesting directive (such as @media) as well.
@media print {
  div {
     .page {
       width: 8in;
       @at-root .a {height: 4in;}
       @at-root {
          .b {height: 5in;}        
          .c {height: 6in;}        
       }
       @at-root (with: media) { color: green; }
       @at-root (without: media) { color: red; }
     }
   }
}

@media print { div .page { width: 8in; } .a { height: 4in; } .b { height: 5in; } .c { height: 6in; } color: green; } div .page { color: red; }