Nesting CSS Classes: Now Made Possible

In previous CSS versions, the idea of nesting classes was elusive. Developers had to resort to more complex techniques to achieve similar effects. However, the CSS Nesting Module has opened up new possibilities.

Can You Nest CSS Classes?

The answer is a resounding "yes." With the CSS Nesting Module, you can embrace the following syntax:

.class1 {
  some stuff;
}

.class2 {
  .class1;
  some more stuff;
}

This syntax allows you to nest classes, creating hierarchical structures.

Sample Implementations

Here are a few examples showcasing the power of CSS nesting:

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child   td { border: 1px solid black }
  }

  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

With CSS nesting, you can now write more concise and maintainable stylesheets. Enjoy the increased flexibility and semantic structure it provides.