Day 99: native nesting

posted on 09.02.2023

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

Nesting in CSS is coming soon! For me personally not the killer feature, at least compared to cascade layers or container queries, but still exciting. Let’s see how it works.

The most important thing to know about native nesting in CSS is that the nested selector always must start with a symbol (. # : [ * + > ~) because of limitations in browser parsing engines.

The following code doesn't work:

/* Doesn't work */

ul {
  li {
    border-color: green;
  }
}

To work around that limitation the nested selector can start with an &.

ul {
  & li {
    border-color: green;
  }
}

/* 
  Same as: 
  ul li { } 
*/

Besides this limitation, everything works as expected for me. Here are some of the things I've tested:

a {
  &:hover {
    background-color: aqua;
  }

  &:focus-visible {
    background-color: aqua;
  }
}

/* 
  Same as:
  a:hover { }
  a:focus-visible { } 
*/

a {
  &:is(:hover, :focus-visible) {
    background-color: aqua;
  }
}

/* 
  Same as:
  a:is(:hover, :focus-visible) { } 
*/

h2 {
  font-family: sans-serif;

  &::first-letter {
    color: red;
  }
}

/* 
  Same as:
  h2 { } 
  h2::first-letter { } 
*/

h2 {
  & + p {
    background-color: red;
  }
}

/* 
  Same as:
  h2 + p { } 
*/

h2 {
  .parent & {
    background-color: aqua;
  }
}

/* 
  Same as:
  .parent h2 { } 
*/

h2 {
  @media (min-width: 400px) {
    background: red;
  }
}

/* 
  Same as:
  @media (min-width: 400px) {
    h2 { } 
  }
*/

h2 {
  @media (min-width: 400px) {
    background: red;

    &::before {
      content: "!";
      color: #fff;
    }

    & ~ p {
      & span {
        background-color: #000;
      }

      :is(span) {
        color: #fff;
      }
    }
  }
}

/* 
  Same as:
  @media (min-width: 400px) {
    h2 { } 
    h2::before { }
    h2 ~ p span { }
    h2 ~ p :is(span) { }
  }
*/

div {
  & & & h3 {
    background-color: green;
  }
}

/* 
  Same as:
  div div div h3 { }
*/

h3 {
  :is(div) & {
    color: #fff;
  }
}

/* 
  Same as:
  :is(div) h3 { }
*/

a {
  &[download] {
    border: 1px solid red;
  }
}

/* 
  Same as:
  a[download] { }
*/

You can try it today in Chrome Dev, Safari Technology Preview, or Polypane 13.

See on CodePen

Do you want to learn even more awesome CSS?

I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

Learn more about the workshop!

Overview: 100 Days Of More Or Less Modern CSS

Day 99: native nesting

Further reading

Do you want to learn even more awesome CSS?