Combinators in Nesting

This article explains about combinators in nesting.

We will explain how to use combinators in nesting with SASS and provide sample code to help you understand step by step.

YouTube Video

Combinators in Nesting

In SASS, you can write CSS selectors concisely based on parent-child relationships, but special attention is needed to correctly handle combinators such as descendant and adjacent selectors.

Basics of Nesting

In SASS, by nesting child selectors within parent selectors, you can clearly and concisely represent parent-child relationships in CSS.

Example: Basic Nesting

1.nav {
2    ul {
3        li {
4            color: blue;
5        }
6    }
7}

Compiled CSS

1.nav ul li {
2    color: blue;
3}

Parent Selector Reference (&)

SASS's & is used to reference the current parent selector.

Combining Combinators and &

By using &, you can build flexible selectors.

Sample

1.card {
2    & > .title {
3        font-weight: bold;
4    }
5    & + .card {
6        margin-top: 20px;
7    }
8}

Compiled CSS

1.card > .title {
2    font-weight: bold;
3}
4.card + .card {
5    margin-top: 20px;
6}

Abbreviated notation for &

In SASS, when a combinator is placed at the beginning of a selector, the parent selector is implicitly inserted, so you can omit the &.

Cases where omitting is possible

For example, when you write + .item, SASS internally interprets it as & + .item and automatically generates the combination with the parent selector.

Sample

1.item {
2    + .item {
3        margin-top: 10px;
4    }
5    &--hover {
6        background-color: red;
7    }
8}

Compiled CSS

1.item + .item {
2  margin-top: 10px;
3}
4.item--hover {
5  background-color: red;
6}

Overview of Combinators

CSS combinators define the relationship between selectors. The following are the main types of combinators.

1. Descendant Selector (space) A descendant selector targets all descendant elements contained within a parent element. Example: .parent .child

2. Child Selector (> ) A child selector targets only the immediate child elements. Example: .parent > .child

3. Adjacent Selector (+) An adjacent selector targets the immediately following adjacent sibling element. Example: .sibling1 + .sibling2

4. General Sibling Selector (~) The general sibling selector targets all following sibling elements. Example: .sibling1 ~ .sibling2

How to Use Combinators in SASS

Descendant Selector (space)

In SASS nesting, the space descendant selector is applied by default.

Sample

1.container {
2    .header {
3        .title {
4            font-size: 20px;
5        }
6    }
7}

Compiled CSS

1.container .header .title {
2    font-size: 20px;
3}

Child Selector (> )

If you want to use a child selector, explicitly write > in your SASS code.

Sample

1.container {
2    & > .header {
3        & > .title {
4            font-size: 20px;
5        }
6    }
7}

Compiled CSS

1.container > .header > .title {
2    font-size: 20px;
3}

Adjacent Selector (+)

To style the immediately following sibling element, use +.

Sample

1.item {
2    & + .item {
3        margin-top: 10px;
4    }
5}

Compiled CSS

1.item + .item {
2    margin-top: 10px;
3}

General Sibling Selector (~)

To style all following siblings at the same level, use ~.

Sample

1.alert {
2    & ~ .alert {
3        border-top: 1px solid red;
4    }
5}

Compiled CSS

1.alert ~ .alert {
2    border-top: 1px solid red;
3}

Pseudo-Classes and Pseudo-Elements with Nesting

Pseudo-classes and pseudo-elements can also be easily written in SASS.

Sample

1.button {
2    &:hover {
3        background-color: blue;
4    }
5    &::after {
6        content: '';
7        display: block;
8    }
9}

Compiled CSS

1.button:hover {
2    background-color: blue;
3}
4.button::after {
5    content: '';
6    display: block;
7}

Practical Sample

Below is an example of a complex style combining multiple combinators.

SASS Code

 1.menu {
 2    .menu-item {
 3        & > .submenu {
 4            display: none;
 5
 6            & > .submenu-item {
 7                font-size: 14px;
 8            }
 9        }
10        & + .menu-item {
11            margin-left: 15px;
12        }
13    }
14}

Compiled CSS

1.menu .menu-item > .submenu {
2    display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5    font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8    margin-left: 15px;
9}

Summary

If you correctly understand nesting and combinators in SASS, you can write more concise and readable CSS.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video