Is CSS Nesting Now Possible?

CSS Nesting: From Theory to Practice

In CSS, the concept of nesting has long been a topic of discussion. While older versions of the specification did not support nesting, the introduction of the CSS Nesting Module has changed the game.

Can CSS classes be nested like this:

.class1{some stuff}

.class2{class1;some more stuff}

Answer:

Yes, CSS nesting is now possible thanks to the CSS Nesting Module. The syntax is as follows:

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;
  }
}

This syntax allows for more concise and maintainable CSS code, as nested selectors can inherit properties from their parent selectors. This is particularly useful for organizing and styling complex layouts.

The above is the detailed content of Is CSS Nesting Now Possible?. For more information, please follow other related articles on the PHP Chinese website!