CSS-Nesting

The Magic of Nested Styles

In the realm of CSS, a new, powerful spell has emerged: nesting! Once the exclusive domain of preprocessors like SCSS, this enchanting construct has now woven its way directly into the sacred halls of native CSS.

Nesting is like a spell that lets you neatly group rules for parent and child elements into a single block, eliminating the need for endless repetition. Imagine an army of CSS soldiers lined up in perfect order, each ready to follow the next command. No more chaos, no more tangled selectors—nesting brings clarity and structure to your layouts. But as with any potent magic, it must be used wisely to maintain balance and avoid descending into disarray.

Let’s Keep Going

The Power of &
Nested Media Queries

Nesting with Style

Less repetition, more clarity – let your CSS grow logically!

The Power of &

The Magical Anchor

The & symbol is your wand in CSS nesting, serving as the anchor for the parent selector. It seamlessly connects nested rules to the original selector, saving you from tedious repetition.

You’ll need the & whenever working with pseudo-classes, pseudo-elements, or specific additions tied directly to the parent selector.

For regular child elements, you can skip it—CSS Nesting automatically maintains that connection. Think of the & as the invisible thread that keeps the magical circle of rules intact and perfectly aligned.

.container {
    background: lightgray;
    padding: 20px;

    /* No & Needed For normal child elements */
    ul {
        list-style: none;
        padding: 0;
    }

     /* & Needed For pseudo- classes 
     and pseudo-elements */
    & li:hover {
        color: darkblue;
        cursor: pointer;
    }
}

Nested Media Queries

The Dimensional Spell

Nesting empowers you to include media queries seamlessly within your CSS rules. This allows your design to adapt gracefully to different screen sizes exactly where needed, without disrupting the flow of your stylesheet.

In this example, the font size and link color for .parent and its children are defined. As the screen becomes narrower, the media query activates, adjusting the font size and color accordingly—all in a clean, nested style.

.parent {
    font-size: 20px;

    & a {
        color: dodgerblue;
    }

    @media (max-width: 600px) {
        font-size: 16px;

        & a {
            color: coral;
        }
    }
}

In this lesson, you have learned…

How to use CSS nesting to structure your stylesheet more clearly and logically by elegantly nesting related rules within one another.
What the & symbol is used for: It links pseudo-classes, pseudo-elements, or suffixes directly to the parent selector without rewriting the selector each time.
How to nest regular child elements without using & – the relationship is automatically established based on the nesting structure.
How to place media queries directly within the nested block, allowing you to implement responsive changes in context and without breaking the CSS flow.
Why nesting improves readability and maintainability, because related rules are clearly grouped and unnecessary repetition is avoided.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Paths of Shadows

Umbra’s shadowy fortress is a labyrinth of twisted paths, interwoven like the musings of a particularly perplexed wizard. To navigate these dim corridors, you must master the art of CSS nesting. Learn to layer styles skillfully without losing yourself in the depths of your CSS files. Organize your rules with such elegance that even Umbra herself might be impressed—and perhaps a little envious.

Your Task: Master CSS Nesting

Apply basic CSS nesting structure: Create a .parent class and nest styles for sub-elements like h1 and .menu directly within the parent class.
Style lists and pseudo-classes: Use CSS nesting to style li elements inside the .menu list. Test how the :hover pseudo-class behaves when applied to the li elements.
Submenu nesting: Create a submenu inside the main list. Use CSS nesting to define styles specifically for .submenu and its li elements. Test how styles inherit and apply across nested elements.
Advanced pseudo-classes and structuring: Utilize &:hover and other pseudo-classes to define interactive effects for submenu elements. Experiment with how the shadowed paths of your menu transform when you tweak the code.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

/* Menu */
.menu {
    list-style: none;
    padding: 0;

    li {
        padding: 10px;
        border: 1px solid #3e4451;
        margin-bottom: 5px;
        border-radius: 5px;
        cursor: pointer;
        background: #4a4f5c;
        transition: all 0.3s ease;

        &:hover {
            background-color: #22a7f0;
            color: white;
        }

        /* Sub Menu */
        .submenu {
            list-style: none;
            margin-top: 10px;
            padding-left: 20px;
            display: none;

            li {
                padding: 8px;
                margin-bottom: 5px;
                border: 1px solid #3b3f47;
                border-radius: 5px;
                background: #3e4451;
                transition: all 0.3s ease;

                &:hover {
                    background-color: #9b59b6;
                }
            }
        }

        &:hover .submenu {
            display: block;
        }
    }
}

Let’s Keep Going