How to set a special style priority?

Question

css

Hello, I'm making a slideshow and I need all frames to default to opacity:0, except for the first one where opacity:1.
But I also need classes with animation styles to take precedence over the default ones, how can I do this ...

.slideshow {
  width: 100%;
  height: 100%;

  @extend %animations;
  & div:first-child {
    opacity: 1; //дефолтный для первого, приоритетом больше чем "дефолтный для всех "
  }
}
::v-deep .frame {
  width: 100%;
  height: 100%;
  opacity: 0; //дефолтный для всех 
}

classes connected via classList.add must have a priority greater than those default ones that I wrote earlier, how to do this.

Answer 1

You can use the default direct class selectors in CSS, and for pluggable use nested selectors. Conditionally like this:
Default:

.elementClass {
opacity: 0;
}

Connected:

.parent1Class .parent2Class .elementClass {
opacity: 1;
}