Chrome Tips by theluckystrike

Chrome CSS Nesting Ampersand Syntax

Chrome CSS Nesting Ampersand Syntax

CSS nesting has arrived in Chrome, and it’s changing how developers write styles. The ampersand syntax makes your stylesheets more readable, maintainable, and scoped exactly where you need them. If you’ve been using preprocessors like Sass, this will feel familiar—but now it’s native to the browser.

What Is CSS Nesting?

CSS nesting allows you to write style rules inside other style rules. Instead of writing repetitive selectors, you can nest them directly. The browser automatically resolves the parent-child relationship when it processes your styles.

Before CSS nesting, you would write:

.card {
  background: white;
  border-radius: 8px;
}

.card .title {
  font-size: 1.5rem;
  font-weight: bold;
}

.card .title span {
  color: #666;
}

With CSS nesting, you can instead write:

.card {
  background: white;
  border-radius: 8px;
  
  .title {
    font-size: 1.5rem;
    font-weight: bold;
    
    span {
      color: #666;
    }
  }
}

The result is cleaner, more organized code that mirrors the structure of your HTML.

The Ampersand (&) Syntax

The ampersand (&) is the key to making CSS nesting powerful and flexible. It represents the parent selector, giving you full control over how your selectors combine. This is especially useful when you need to modify styles based on states, pseudo-classes, or specific conditions.

Basic Usage

When you use the ampersand, it explicitly references the parent selector:

.button {
  padding: 12px 24px;
  background: blue;
  color: white;
  
  &:hover {
    background: darkblue;
  }
  
  &:active {
    background: navy;
  }
}

This compiles to:

.button {
  padding: 12px 24px;
  background: blue;
  color: white;
}

.button:hover {
  background: darkblue;
}

.button:active {
  background: navy;
}

Building Complex Selectors

The ampersand becomes invaluable when you need to create complex combinations:

.nav {
  background: #f5f5f5;
  
  & &-item {
    padding: 8px 16px;
    
    &.active {
      background: blue;
      color: white;
    }
    
    &:hover {
      background: #e0e0e0;
    }
  }
}

This generates multiple selectors without repeating the base .nav prefix.

Combining with Pseudo-Classes and Pseudo-Elements

You can also combine the ampersand with pseudo-classes and pseudo-elements seamlessly:

.link {
  color: blue;
  text-decoration: none;
  
  &:visited {
    color: purple;
  }
  
  &:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
  }
  
  &::after {
    content: " →";
  }
}

Practical Examples

Card Component with States

Here’s a practical card component demonstrating various nesting patterns:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: box-shadow 0.2s;
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  &.featured {
    border-color: gold;
    background: #fffef0;
  }
  
  &-title {
    font-size: 1.25rem;
    margin-bottom: 12px;
    
    &::before {
      content: "★ ";
    }
  }
  
  &-content {
    color: #444;
    line-height: 1.6;
  }
}

Form Elements

Forms benefit greatly from nested styles:

.form-group {
  margin-bottom: 16px;
  
  & label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
  }
  
  & input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    
    &:focus {
      border-color: blue;
      outline: none;
    }
    
    &:invalid {
      border-color: red;
    }
  }
  
  & .error-message {
    color: red;
    font-size: 0.875rem;
    margin-top: 4px;
    
    &:empty {
      display: none;
    }
  }
}

Browser Support

CSS nesting with the ampersand syntax is now supported in Chrome and other Chromium-based browsers. Firefox and Safari have also added support, making this a safe feature to use in production. However, always verify the specific syntax support if you need to support older browsers.

For the best experience, consider using Tab Suspender Pro to manage your browser tabs while working on CSS development—it helps keep Chrome running smoothly when you have multiple windows open.

Best Practices

When using CSS nesting with the ampersand, keep these tips in mind:

Don’t over-nest. While nesting is powerful, going too deep makes your CSS harder to maintain. A good rule is to limit nesting to three or four levels.

Use the ampersand when you need explicit parent reference, such as with pseudo-classes, pseudo-elements, or modifier classes. Without the ampersand, the browser automatically adds a space, which changes the meaning of your selector.

Test your output. Chrome’s DevTools show the compiled selectors, making it easy to verify your nesting produces the expected CSS.

Conclusion

CSS nesting with the ampersand syntax is a game-changer for web developers. It brings the convenience of preprocessor-style nesting directly to native CSS, reducing repetition and improving code organization. Start using it in your projects today, and you’ll wonder how you ever wrote styles without it.

Built by theluckystrike — More tips at zovo.one