Selector Lists and Combinators in SCSS (Sass)

We know about basic nesting in SCSS (SassScript) but there is so much more than just basic nesting.

Selector Lists

Selector lists are nothing but comma-separated selectors. If you want to apply same nesting rule for more than one selectors, SCSS gives you an easy way to do it.

Just like this:

Each selector in the list is nested separately and then combined into a selector list.

Here’s the compiled CSS:

.alert ul, .alert p, .warning ul, .warning p {
    border: 1px solid white;
}

Selector Combinators

We can use nesting for the selectors that use combinators.

Just like this:

Here’s the compiled CSS:

ul > li {
  list-style-type: none;
}

h2 + p {
  border-top: 1px solid gray;
}

p ~ span {
  opacity: 0.8;
}

Share this post