how to add two different parent elements to a common child element in sass?

Question

is there a way to add two different parent elements to a single common child element?

both the next and prev contain a span element in their HTML structure.

.carousel-control-next,.carousel-control-prev{
       width:unset;
        span{
            background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(252,122,34)' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")!important;
        }


    }

This only applies to the next element " .carousel-control-next" but doesn't apply to the prev ".carousel-control-prev"?How to make it apply for both at once?

Answer 1

Maybe you're looking for something like this:

.parent1, .parent2 {
  & .child {
    color: red;
  }
}

Rendered CSS is:

.parent1 .child, .parent2 .child {
  color: red;
}

I think adding a class directly to the child regardless of the parent would be a better option:

.redChild {
   color: red;
}

Answer 2

This is the correct format for css:

.carousel-control-next span,.carousel-control-prev span{
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(252,122,34)' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")!important;
}