Photo by Corinne Kutz on Unsplash

Styling a Child Element Based on the Class of a Parent Element in SASS/SCSS

Have you ever needed to style a child element only if the parent element has a specific class?

An example of when I have needed to use this is to change the position of a search typeahead if the navigation is open.

Click on the pen below to see an example.

Basically, your CSS will look like this:

.child {
  color: red;
  
  .active & {
    color: blue;
  }
}

In this example, the parent div is only coloured blue if it has the ‘active’ class.

Happy coding! ⌨️