Sass selector.nest()

Beginner
8 min read
Updated: Nov 2026
5 examples
Dart Sass 1.23+
Sass selector.nest combining selectors like nested SCSS with parent &
Definition

Definition and Usage

selector.nest($selectors...) combines selectors as though they were nested within one another in the stylesheet—usually with a descendant space, or as a compound when you use &. Load with @use "sass:selector".

Official sample idea.

nest("ul", "li") → ul li; nest(".alert", "&:hover") → .alert:hover; nest(".accordion", "&__copy") → .accordion__copy.

Parent selectors allowed (almost).

Unlike most selector helpers, every argument except the first may contain &. Placeholders are allowed too.

Need glue without nesting?

Use selector.append() when you want compounds with no descendant space and no &.

Syntax

Syntax

SCSS
@use "sass:selector";

selector.nest($selectors...) //=> selector

selector.nest("ul", "li"); // ul li
selector.nest(".alert, .warning", "p"); // .alert p, .warning p
selector.nest(".alert", "&:hover"); // .alert:hover
selector.nest(".accordion", "&__copy"); // .accordion__copy

// Use as a rule selector:
#{selector.nest(".card", ".title")} { ... }

// Global alias (legacy): selector-nest($selectors...)
// Prefer selector.nest after @use "sass:selector"

Pattern: pass outer then inner pieces → get nested-stylesheet results → interpolate with #{…} for CSS rules.

Reference

Nest vs Append

Same pieces, different combinators:

HelperTypical resultUse when
selector.nest.alert .warn or .alert:hover with &Nested stylesheet behavior / parent selectors
selector.append.alert.warn (no space)Same-element glue without &
BEM tip.

Both can build .menu__item: nest needs &__item; append uses __item.

Code

SCSS Examples

Examples use @use "sass:selector". Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).

Example 1 — Official Nest Samples

Descendants, lists, parent hover, and BEM with &.

SCSS
@use "sass:selector";

.probe {
  --ul: #{selector.nest("ul", "li")};
  --alert: #{selector.nest(".alert, .warning", "p")};
  --hover: #{selector.nest(".alert", "&:hover")};
  --bem: #{selector.nest(".accordion", "&__copy")};
}

How It Works

  1. Without &, Sass inserts a nesting space.
  2. Lists expand like nested SCSS.
  3. With &, the parent is substituted.
  4. Matches the official Sass docs samples.

Example 2 — Build Rule Selectors

Interpolate nested results into real style rules.

SCSS
@use "sass:selector";

#{selector.nest(".card", ".title")} {
  font-weight: 700;
}

#{selector.nest(".card, .panel", "p")} {
  margin: 0;
}

How It Works

  1. .card .title is a descendant pair.
  2. Parent list expands under each outer selector.
  3. #{…} turns the result into CSS rules.
  4. Same shape as writing nested SCSS by hand.

Example 3 — State Mixin with &

Nest a pseudo onto a base selector using the parent reference.

SCSS
@use "sass:selector";

@mixin state($base, $pseudo) {
  #{selector.nest($base, $pseudo)} {
    outline: 2px solid currentColor;
  }
}

@include state(".btn", "&:hover");
@include state("a", "&:focus-visible");

How It Works

  1. &:hover keeps the compound on the same element.
  2. Bare :hover would nest as a descendant instead.
  3. Mixin accepts any base + parent-aware piece.
  4. Official hover sample, packaged for reuse.

Example 4 — Nest vs Append Side by Side

Same pieces, different nesting rules.

SCSS
@use "sass:selector";

.compare {
  --nest: #{selector.nest(".alert", ".warn")};
  --append: #{selector.append(".alert", ".warn")};
  --bem-nest: #{selector.nest(".menu", "&__item")};
  --bem-append: #{selector.append(".menu", "__item")};
}

How It Works

  1. Plain nest inserts a descendant space.
  2. append glues with no space.
  3. BEM nest needs &__item.
  4. BEM append uses __item — same end result.

Example 5 — Parent Selector Loop

Build several nested pieces from one block name.

SCSS
@use "sass:selector";

$block: ".nav";
$parts: "&__link", "&__icon", "&:hover";

@each $part in $parts {
  #{selector.nest($block, $part)} {
    display: inline-block;
  }
}

How It Works

  1. Each part includes &.
  2. Results stay compounds on .nav.
  3. Elements and hover in one loop.
  4. Scales the official accordion &__copy idea.

Edge Cases & Pitfalls

Most nest bugs are forgetting & or confusing nest with append.

&

Parent only after the first arg

Do not put & in the first selector; later args may use it.

space

No & means descendant

nest(".a", ".b") is .a .b. Want .a.b? Use append or &.b.

pseudo

Pass &:hover, not bare :hover

Bare pseudos nest as descendants; & keeps them on the parent.

#{}

Interpolate for rules

Wrap results in #{…} to emit CSS selectors.

Toolchain

Sass Support

Prefer the module form with current Dart Sass.

APIStatus
selector.nest()Dart Sass 1.23+ via @use "sass:selector"
Return typeSelector
Parent selectorsAllowed except on the first argument
Legacy globalselector-nest($selectors...)

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Nests like SCSS — usually a descendant space.
  • & allowed on every argument except the first.
  • vs append — append glues; nest follows nesting rules.
  • Prefer @use "sass:selector" (Dart Sass 1.23+).

One line: to combine selectors like nested SCSS, use selector.nest($selectors...).

Practice

Compile Notes

Practical checklist:

checklist.txt
1. @use "sass:selector"
2. Pass outer then inner selectors
3. Use & on later args for compounds / pseudos
4. Expect descendant spaces without &
5. Use append when you want glue without nesting

Frequently Asked Questions

selector.nest($selectors...) combines selectors as though they were nested within one another in the stylesheet. Example: nest("ul", "li") becomes ul li.
nest follows nesting rules (often a descendant space, or & for compounds). append glues pieces with no space: append(".alert", ".warn") is .alert.warn, while nest(".alert", ".warn") is .alert .warn.
Yes for every argument except the first. Unlike other selector functions, all of them except the first may also contain parent selectors. Example: nest(".alert", "&:hover") becomes .alert:hover.
Nesting expands across lists like nested SCSS. nest(".alert, .warning", "p") becomes .alert p, .warning p.
Yes. selector-nest($selectors...) is the legacy global name. Prefer selector.nest after @use "sass:selector".
Dart Sass 1.23+. LibSass and Ruby Sass do not load sass:selector with @use; they may still offer the legacy global name.

Next: Sass selector.parse()

Turn a selector string into the structured selector value format.

selector.parse() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass selector.is-superselector Function Sass selector.parse Function