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 pseudo 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.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?