5. Nesting

Nesting, also known as CSS Nesting, is a feature that lets us nest selectors inside other selectors. It helps write more modular CSS code, avoiding repetition.

Let's look at a simple example starting from the following HTML:

<article class="planeta planeta--marte">
    <h2 class="planeta__titulo">Marte</h2>
    <p class="planeta__descripcion">Mars is the fourth planet of the solar system.</p>
</article>

<article class="planeta planeta--jupiter">
    <h2 class="planeta__titulo">Júpiter</h2>
    <p class="planeta__descripcion">Jupiter is the fifth planet of the solar system.</p>
</article>

We want to apply a white text color to the title of Mars. To do so, I can do the following:

.planeta--marte .planeta__titulo {
    color: white;
}

Next I want the description of Mars to be gray.

.planeta--marte .planeta__titulo {
    color: white;
}

.planeta--marte .planeta__descripcion {
    color: gray;
}

Using nesting, I can simplify it quite a bit:

.planeta--marte {
    .planeta__titulo {
        color: red;
    }

    .planeta__descripcion {
        color: gray;
    }
}

Not only is it more compact and easier to work with, but I also avoid repeating the .planeta--marte selector in each rule.

Using &

Nesting also lets us use the & selector to refer to the parent selector. It would be equivalent to using :is.

Let's look at an example. If I need to give a red background color to Mars and pink to Jupiter, it is relatively easy:

.planeta--marte {
    background-color: red;
}

.planeta--jupiter {
    background-color: pink;
}

But I want to limit it. It must, no matter what, be accompanied by the .planeta class (similar to using :is).

.planeta.planeta--marte {
    background-color: red;
}

.planeta.planeta--jupiter {
    background-color: pink;
}

Or we can use nesting together with &:

.planeta {
    &.planeta--marte {
        background-color: red;
    }

    &.planeta--jupiter {
        background-color: pink;
    }
}

We are indicating that I will only apply the styles if they accompany .planeta.

We could combine all of the above to create a firmer modulation:

.planeta {
    &.planeta--marte {
        .planeta__titulo {
            color: red;
        }

        .planeta__descripcion {
            color: gray;
        }
    }

    &.planeta--jupiter {
        .planeta__titulo {
            color: orange;
        }

        .planeta__descripcion {
            color: green;
        }
    }
}

Concatenation is not possible. For example, I cannot have a parent called .button that contains a child called &--primary with the goal of obtaining .button--primary. It is a very common technique in Sass together with naming conventions like BEM, but with CSS Nesting it cannot be replicated.

Another very interesting use is to include pseudo-elements and pseudo-classes of the parent selector. For example:

.planeta {
    background-color: blue;
}

.planeta:hover {
    background-color: red;
}

We could package it as follows:

.planeta {
    background-color: blue;
    &:hover {
        background-color: red;
    }
}

And so on with any other element.

.planeta {
    background-color: blue;
    &:hover {
        background-color: red;
    }
    &::before {
        content: '🪐';
    }
    &::after {
        content: '🌎';
    }
}

Interesting, right?

Nesting rules

We can nest @media, @supports, @layer, @scope and @container.

It is really useful for media queries. For example, I am going to say that on the desktop version the background of Mars is red but yellow on smartphone:

.planeta {
    &.planeta--marte {
        background-color: red;

        @media (width < 600px) {
            background-color: yellow;
        }
    }
}