Исключить элемент из перехода css с тем же свойством

Question

Я хочу исключить элемент из эффекта перехода внутри группы. Ниже приведен код:

HTML

<div class="container">
  <div class="item1"/>
  <div class="item2"/>
  <div class="item3"/>
  <div class="exclude"/>
</div>

CSS

.container {
  some-property: someValue;
  some-property: someValue;
  transition: opacity 0.5 ease-in-out 0s;
}

.container:active {
  opacity: 0.2;
}

Answer 1

Ваш переход применяется к родительскому элементу, в данном случае .container, поэтому невозможно удалить эффект для дочерних элементов.

Что вам нужно сделать, так это применить эффект непосредственно к дочерним элементам, и пропустите тот, который вы хотите избежать.

Если вы хотите применить эффект перехода к дочерним элементам, когда пользователь нажимает на родительский элемент, просто наберите go примерно так:

div {
  padding: 15px;
  border: 1px solid #222;
}

.container {
  display: grid;
  border-color: #999;
  grid-template: 1fr 1fr/1fr 1fr;
  grid-gap: 15px;
}

.container .exclude {
  background-color: #999;
  border-color: #999;
}

.container div:not(.exclude) {
  transition: opacity 0.5 ease-in-out 0s;
}

.container:active div:not(.exclude) {
  opacity: 0.2;
}

<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="exclude"></div>
</div>

Answer 2

Используйте функцию выбора :not():

.container > *:not(.exclude) {
    transition: opacity etc...
}

Или очистите свойство transition для .exclude , используя селектор с более высокой специфичностью :

.container > * {
    transition: etc
}

.container > .exclude {
    transition: none;
}

Или просто используйте !important (который вы всегда должны избегать):

.container {
    transition: etc
}

.container > .exclude {
    transition: none !important;
}