learn css for free

What is nesting?

Nesting is a way to write CSS rules in a hierarchical manner, allowing you to group related styles together. This can make your CSS more organized and easier to read.

How to use nesting

To use nesting, you can write your CSS rules inside the parent selector. For example:

.parent {
    color: blue;
    .child {
        color: red;
    }
}

In this example, the .child selector is nested inside the .parent selector, meaning that the styles for .child will only apply when it is inside an element with the class .parent.

Benefits of nesting

Nesting can help you keep your CSS organized and reduce repetition. It also makes it easier to understand the relationship between different elements in your HTML structure.

• Keeps related styles grouped together
• Reduces repeated parent selectors
• Makes the HTML structure easier to read from CSS
• Helps prevent naming conflicts

Nesting with pseudo-classes

You can also nest pseudo-classes like :hover inside a parent selector to keep interactive styles close to the base styles.

.button {
    background-color: blue;
    &:hover {
        background-color: darkblue;
    }
}