Sass Parent Selector

Last Updated:

Sass Parent Selector

Use & (Parent Selector) in an inner selector to re-use the outer selector in more complex ways.

Example

SASS TO CSS CONVERTER
a{ color: black; font-size: 18px; &:hover{ color: green; } }

Sass Parent Selector with :not

You can also use the parent selector to add css properties which is not for outer selector.

Example

SASS TO CSS CONVERTER
a{ font-size: 17px; :not(&){ font-size: 18px; } }

Seletor Before Parent Selector

Example

SASS TO CSS CONVERTER
a{ margin: 0; footer & { margin: 10px; } }

Adding Suffixes

You can also use the parent selector to add extra suffixes to the outer selector.

Example

SASS TO CSS CONVERTER
.apple{ color: red; &-california{ color: IndianRed; &_los-angeles{ color: green; } } }

Share this Page

Meet the Author