Как задать особый приоритет стилей?

Question

[Alianos]

Здравствуйте, я делаю слайд шоу и мне нужн чтоб все кадры по дефолту были с opacity:0, кроме первого где opacity:1.
Но таже мне нужно чтоб классы с стилями анимации имели приоритет над дефолтными, как ето сделать...

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

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

классы подключаемые через classList.add должны иметь приоритет больше чем те дефолтные что я написал раньше, как ето сделать.

Answer 1

[Danny Arty]

Можете использовать по дефолту прямые селекторы по классу в CSS, а для подключаемых использовать вложенные селекторы. Условно так:

Дефолт:

.elementClass {
opacity: 0;
}

Подключаемые:

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

Comments

[Alianos]

Спасибо, но к сожалению подключаемые берутся из Animate.css - https://animate.style/, я не могу сделать их вложеными...

[Danny Arty]

Alianos, а задать стилям important?