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 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:

      @include transform (rotatey(-180deg));  

will compile to the following CSS:

.notecard:hover {
  transform: rotatey(-180deg);
Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.