What is CSS Nesting?

Introduction

If you are a front-end developer who has worked with a CSS preprocessor, you have probably encountered or used the nesting feature. It has been a popular feature and for me, it was one of the features that made me use a CSS preprocessor.

This year, native CSS nesting was supported in all major browsers: Chrome, Firefox, and Safari. It's a core CSS feature that makes writing CSS easier. In this article, I'll document what I've learned about CSS nesting so far and share my findings with you, along with use cases and examples.

There are no prerequisites to follow except your excitement and focus.

Nesting in CSS has been a long-awaited feature for many developers. We used to rely on CSS preprocessors like Sass or Less. Let me give you a quick overview:

Consider the following example. We have an icon that is in the .nav__item selector.

.nav__item {
.icon {
display: flex;
padding: 1rem;
}
}

The above code is valid Sass code. When compiled, it will look like this for the browser:

.nav__item .icon {
display: flex;
padding: 1rem;
}

With native CSS nesting, the same CSS will work as is. Here is a figure showing a comparison between native CSS nesting and the browser's DevTools.

Notice how the browser displays the CSS similar (almost) to how it is displayed in CSS.

If this CSS was compiled into Sass, the browser would display it as follows:

Benefits of CSS Nesting

In my opinion, there are valid reasons that make nested CSS useful:

• CSS is easier to read.
• Grouping style together
• Limiting specific styles
• Styling HTML elements that don't have classes or IDs.

CSS NESTING rules

To educate you on CSS nesting, I will try to provide visual examples of various CSS problems and how nesting can help solve them.

First of all, you need to learn about the ampersand symbol &. There are several situations where this symbol is essential.

Nesting an element without a class or ID

In this example, the element <a> Styled via .nav__item. The use of the &lt;head&gt; mark is optional for CSS to be valid.

.nav__item {
  & a {
    display: block;
    padding: 1.5rem 1rem;
  }
}

/* Same as: */
.nav__item a {
}

You can also opt out of the checkmark:

.nav__item {
a {
display: block;
padding: 1.5rem 1rem;
}
}
/* Same as: */
.nav__item a {
}

Note that this is a recent update and is called Relaxed CSS nesting. It works in the latest Chrome Canary and Safari Technology Preview. Check out this post on Relaxed Nesting by Adam Argyle.

Nesting an element with a class

Consider the same example as before, but suppose the element <a> It has an HTML class.

.nav__item {
.link {
display: block;
padding: 1.5rem 1rem;
}
}
/* Same as: */
.nav__item .link {
}

There is no need to use a symbol here. The class name will work just fine.

Nesting CSS combiners

One of the benefits of CSS Native Nesting is the use of combinators. Let's take a look at some examples.

In the example below, I want to select any element with the class .nav__item that is preceded by another element with the same class. I used the adjacent sibling selector for this purpose.

In native CSS nesting, we can use the ampersand symbol to mimic that. Notice that I repeated it twice.

.nav__item {
& + & {
border-left: 2px solid;
}
}

The magic happens in the second iteration of the ampersand. Here, the browser realizes that I want to use the adjacent sibling selector. Let me show you a figure that demonstrates this:

Another example of nesting is the child combinator. It can select the direct child of an element.

.nav__item {
> a {
padding: 1rem;
}
}

Ampersand symbol

.nav__item {
& a {
color: blue;
}
}

This was required in the original CSS nesting specification. In Safari TP 179+ and Chrome Canary 120, the ampersand is no longer required for nested elements.

As a result, the following works:

.nav__item {
a {
color: blue;
}
}

The only problem is that you have to revert to the previous version of the specification, which must include the markup and the markup.

Nesting with example: Active, Focus, Hover

:active, :focus, and :hover are CSS pseudo-classes that are activated by user action.

With CSS nesting, we can nest them all at once to avoid code duplication. Let's take :hover as an example:

button {
&:hover {
background-color: var(--bg-color);
}
&:focus {
outline: solid 2px;
}
}

The difference when using a preprocessor for nesting is that the browser renders it as follows:

button:hover {
background-color: var(--bg-color);
}
button:focus {
outline: solid 2px;
}

Let's take a look at how CSS nesting is displayed in Chrome, Safari, and Firefox.

I have some thoughts about DevTools UX for CSS nesting and I will address them later in the article.

Nesting with Example: Posting Content

One of the first examples of testing nested CSS is styling the body content of a post. Imagine an article with headings, text, images, quotes, and more.

Headlines

We tend to style titles like the following:

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
/* styles here */
}

With nested CSS, it's easier:

.post-content {
h1,
h2,
h3,
h4 {
color: var(--heading-color);
font-weight: var(--heading-font-bold);
margin-bottom: var(--size-2);
}
}

We can also do the same thing using the :is() selector.

.post-content {
:is(h1, h2, h3, h4) {
color: var(--heading-color);
font-weight: var(--heading-font-bold);
margin-bottom: var(--size-2);
}
}

Paragraph element

A common case is styling a link that is inside a paragraph. In such a case, CSS nesting works great.

.post-content {
& p {
color: var(--color-black);
& a {
font-weight: bold;
text-decoration: underline;
}
}
}

The link may also require a hover or focus effect.

.post-content {
& p {
color: var(--color-black);
& a {
font-weight: bold;
text-decoration: underline;
&:hover {
/* hover styles */
}
}
}
}

We can also nest media queries.

.post-content {
& p {
/* base styles */
@media (min-width: 400px) {
/* do something */
}
}
}

In some cases, a CMS may be an element <p> wrap it in another element, and for style purposes, it should only be used for direct elements <p> Style it.

.post-content {
/* Select the direct <p> elements */
> p {
/* base styles */
}
}

Block quote

In this example, the quote gets its own custom style and the element <p> Inside the quote, select to reset the bottom margin to zero.

.post-content {
& blockquote {
/* custom quote styling */
& p {
margin-bottom: 0;
}
}
}

Post shape

The post form contains an image and a