What is the best way to style an element with two classes in SCSS?

Question

I've always understood that when targeting a div with two classes in SCSS, you should structure it like this:

HTML:

<div class="item active">...</div>

SCSS:

.item {
  &.active {
   /* add your code here */
  }
}

But what about when I want to target an element's after pseudo-element? In CSS, we would normally do something like this:

.item.active:after {
/* add your code here */
}

Any help would be greatly appreciated!

Answer 1

Answer №1

Here are a couple of ways to achieve this:

a. Use this method if you want to apply styles to the .active class as well:

.item {
  background: red;
  height: 100px;
  width: 100px;
  &.active {
    &:after{
      content: "aaa";
    }
  }
}

or

b. Use this method if you only want to add styles to the :after pseudo-element when the item has the class active:

.item {
  background: red;
  height: 100px;
  width: 100px;
  &.active:after{

      content: "aaa";

  }
}

Check out the jsFiddle link for a live example.

Answer 2

Here are a couple of ways to achieve this:

a. Use this method if you want to apply styles to the .active class as well:

.item {
  background: red;
  height: 100px;
  width: 100px;
  &.active {
    &:after{
      content: "aaa";
    }
  }
}

or

b. Use this method if you only want to add styles to the :after pseudo-element when the item has the class active:

.item {
  background: red;
  height: 100px;
  width: 100px;
  &.active:after{

      content: "aaa";

  }
}

Check out the jsFiddle link for a live example.

Answer 3

Experiment with:

.element {
   &.enabled {
     &:before {
     /* add your code here */
     } 
   }
 }

Answer 4

Experiment with:

.element {
   &.enabled {
     &:before {
     /* add your code here */
     } 
   }
 }

Answer 5

.element {
    &.selected {
        /* add your code here */
        &:before{
            /* customize your code here */
        }
    }
}

Answer 6

.element {
    &.selected {
        /* add your code here */
        &:before{
            /* customize your code here */
        }
    }
}