Skip to Content
Mixins and the & Selector
The & Selector in Nesting

In the next set of exercises, you’ll use new Sass concepts to fix and add styles to the notecard on the right so that it flips when you hover over it!

Recall that, in CSS, a pseudo-element is used to style parts of an element, for example:

  • Styling the content ::before or ::after the content of an element.

  • Using a pseudo class such as :hover to set the properties of an element when the user’s mouse is touching the area of the element.

In Sass, the & character is used to specify exactly where a parent selector should be inserted. It also helps write psuedo classes in a much less repetitive way.

For example, the following Sass:

.notecard{ &:hover{ @include transform (rotatey(-180deg)); } }

will compile to the following CSS:

.notecard:hover { transform: rotatey(-180deg); }



In main.scss, inside of .notecard, nest and invoke the following & selector:

&:hover{ @include transform (rotatey(-180deg)); }

Click “Run” to see your changes in the browser and inspect them in the output of main.css. Hover over your card and watch the contents rotate! We will be styling it further in the next exercises.

Folder Icon

Sign up to start coding

Already have an account?