Nesting

Nesting allows us to nest CSS rules in a hierarchy. Nesting reduces the need to repeat selectors for related elements.

The & Nesting Selector

When nesting, the browser will automatically add a space between selector rules. The CSS & nesting selector is used to remove the whitespace between selector rules.

In CSS pseudo-classes, the : must appear immediately after the selector.

a:hover        /* Correct */
a :hover       /* Incorrect, as there is a space between the a and :

If we are nesting a pseudo-class, then we need to use the & nesting selector.

Example of a nested pseud-class that needs to use the & selector (Run Example)

nav
{
    display:flex;
    text-align: center;

    a
    {
        flex:1;
        text-decoration: none;
        color: #ccc;
        background-color: #61c6f0;
        display: block;

        &:hover,
        &:active
        {
            color: #0ac;
            background-color: #ddd;
        }
    }
}

Remove the & selector from the above example. The hover and active styles will not be applied.

In order to target an element with class="a b" the & nesting selector is needed. If it is not used, then the whitespace will break the compound selector. In the example below, if we do not the & selector, it will result in the CSS treating the warning (and success) class as being a sub-class of message. Using the & nesting selector will correctly apply the style for elements with class = "warning message".

Example of warning and success messages that need to include the & selector (Run Example)

<!doctype html>   
<html>
    <head>
        <title>Course notes example code</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            .message
            {
                border-radius:5px;

                &.warning
                {
                    background-color:red;
                }

                &.success
                {
                    background-color:green;
                }
            }
        </style>
    </head>

    <body>
        <div class="warning message">This is a warning message</div>
        <div class="success message">And this is a success message</div>
    </body>
</html>

Remove the & selector from the above example. The warning and success styles will not be applied.

Nesting can be used to organise the css that relates to a given class together. Change the code in this example, so that the css photo class in the code is nested, as shown here.

Nesting can be used to organise the css that relates to a given id together. Change the code from this example, so that the css for the employee id is nested, as shown here.