Sass & SCSS Parent Selector

Introduction to Sass & SCSS Parent Selector

The parent selector lets you reference the current selector when nesting, using the & symbol in both Sass and SCSS. In this Sass tutorial we will learn what the parent selector does, how the & selector behaves, and simple patterns to use it safely.

What is the Parent Selector?

The parent selector is a placeholder for the current chained selector, used when writing nested rules. The & token is replaced by the parent selector during Sass or SCSS compilation, allowing flexible selector composition.

• The & selector represents the current selector in a nested context
• It prevents repeating the full selector, keeping code concise
• Common for modifiers like &.is-active or pseudo-classes like &:hover
• Works inside nested rules, media queries, and at-rule blocks
• Combine with interpolation for dynamic selectors

a {
	color: #007bff;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

a
	color: #007bff
	text-decoration: none

	&:hover
		text-decoration: underline

a {
    color: #007bff;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

Similarly, you can append the parent selector to create modifier classes or BEM-style variations.

Basic Usage of Sass Parent Selector

The parent selector in Sass or SCSS helps keep styles structured, reusable, and easier to maintain. Common patterns for the parent selector include:

• Nesting child selectors
• Modifier classes
• Pseudo-classes and states

Nesting Selectors with & Selector

Use & symbol to avoid repeating the full selector when nesting.

• Place & at the start for modifier rules
• Use & inside nested blocks for direct children
• Keep nesting depth shallow for readability
• Avoid & alone at top level, it needs a parent

.card {
    & .title {
        font-size: 18px;
        font-weight: bold;
    }
    & .content {
        font-size: 15px;
		padding: 10px;
    }
}

.card
    & .title
        font-size: 18px
        font-weight: bold
    & .content
        font-size: 15px
		padding: 10px

.card .title {
    font-size: 18px;
    font-weight: bold;
}
.card .content {
	font-size: 15px;
	padding: 10px;
}

Appending & Selector Symbol to Modify Classes

Append or prepend to the parent to create modifier or BEM style class names.

• Use &.is-active or &--large for modifiers
• Combine & with hyphens for BEM(Block Element Modifier) like names
• Prefer explicit class names for public APIs

.button {
    padding: 10px 15px;
    border-radius: 4px;
    background: #007bff;
    color: #fff;

    &.is-active {
        background: #0056b3;
    }

    &--large {
        padding: 15px 25px;
        font-size: 18px;
    }
}

.button
    padding: 10px 15px
    border-radius: 4px
    background: #007bff
    color: #fff

    &.is-active
        background: #0056b3

    &--large
        padding: 15px 25px
        font-size: 18px

.button {
    padding: 10px 15px;
    border-radius: 4px;
    background: #007bff;
    color: #fff;
}
.button.is-active {
    background: #0056b3;
}
.button--large {
    padding: 15px 25px;
    font-size: 18px;
}

Using & Selector for Pseudo-classes and States

The parent selector works well with pseudo-classes like hover, focus, and active states.

• Write &:hover, &:focus, &:active inside blocks
• Group state rules to keep styles local
• Use transitions on parent when possible for smooth effects
• Avoid putting heavy layouts inside state rules

.button {
    background: #007bff;
    color: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    transition: background 0.3s;

    &:hover {
        background: #0056b3;
    }

    &:focus {
        outline: 2px solid #333;
    }

    &:active {
        background: #003d80;
    }
}

.button
    background: #007bff
    color: #fff
    padding: 10px 15px
    border-radius: 4px
    transition: background 0.3s

    &:hover
        background: #0056b3

    &:focus
        outline: 2px solid #333

    &:active
        background: #003d80

.button {
    background: #007bff;
    color: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    transition: background 0.3s;
}
.button:hover {
    background: #0056b3;
}
.button:focus {
    outline: 2px solid #333;
}
.button:active {
    background: #003d80;
}

Advanced Usage of Parent Selector

Advanced patterns show how & selector combines with interpolation, deep nesting, and responsive rules in media queries.

Using & Selector with Interpolation

Interpolation with & parent selector lets you generate dynamic selectors by combining parent references with variables or expressions.

• Combine & with #{} for dynamic selectors
• Helps in creating variant-based classes

$variant: danger;
.btn {
    &-#{$variant} {
        background: red;
        color: #fff;
    }
}

$variant: danger
.btn
    &-#{$variant}
        background: red
        color: #fff

.btn-danger {
    background: red;
    color: #fff;
}

Multiple Nesting Levels with & Selector

You can nest & symbol across several levels, and it will always expand to include the complete parent selector chain.

• Each & expands the full chain of parents
• Useful for deep hierarchies

.menu {
    &__item {
        &--active {
            color: green;
        }
    }
}

.menu
    &__item
        &--active
            color: green

.menu__item--active {
    color: green;
}

Scoped Media Queries with & Selector

Using & selector inside media queries lets you apply responsive rules directly within the selector’s scope for better organization.

• Place & inside media blocks to scope rules
• Keeps responsive styles grouped with base styles

.card {
    font-size: 16px;
    @media (min-width: 768px) {
        & {
            font-size: 18px;
        }
    }
}

.card
    font-size: 16px
    @media (min-width: 768px)
        &
            font-size: 18px

.card {
    font-size: 16px;
}
@media (min-width: 768px) {
    .card {
        font-size: 18px;
    }
}

Selector Combinators with & Symbol

The & parent selector in Sass can be paired with combinators like +, ~, or spaces to define relationships between elements.

• Use & with +, ~, or parent-child selectors
• Helps target relationships directly

.alert {
    & + & {
        margin-top: 10px;
    }
}

.alert
    & + &
        margin-top: 10px

.alert + .alert {
    margin-top: 10px;
}

Common Mistakes and Best Practices

Follow these guidelines to avoid pitfalls and keep parent selector usage in Sass or SCSS stylesheets clean and maintainable.

• Limit nesting depth to two or three levels
• Use & for modifiers and pseudo-classes
• Prefer normal nesting for child elements
• Keep selectors simple and readable
• Split large components into smaller parts
• Review compiled CSS for unnecessary specificity
• Use clear class names to show intent
• Add comments and docstrings for complex selector patterns
• Enforce limits with style lint tools