CSS Nesting and Layers Demo

Example

This is a div with a lot of classes

This is a span with a lot of classes

This is a div with no classes

This is a div just outside of #example section

CSS Code

Example

/* this thing is nested! */
#example {
  @layer maybe-external-styles {
    .bloated.example.class.that.might.be.hard.to.override {
      color: red;
    }
  }

  /* this takes precedence! */
  div {
    color: blue;
  }
}

Code Snippets

summary h3 {
  display: inline-block;
  cursor: pointer;
}

pre {
  counter-reset: line;
  padding-left: 0.5rem;

  span.line {
    &::before {
      border-right: 1px solid hsl(0, 0%, 50%);
      color: hsl(0, 0%, 50%);
      content: counter(line);
      counter-increment: line;
      margin-right: 0.75rem;
      padding-right: 0.5rem;
    }

    &:nth-child(-n + 9) {
      padding-left: 0.5rem;
    }

    &:only-child::before {
      content: none;
    }
  }
}