Sass Parent Selector

You are Here:

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; } } }

Reminder

Hi Developers, we almost covered 99.1% of Sass Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in Sass.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author