CODEWITHSUNDEEP
htmlcsscss-selectorscss-transitions
swoopy
swoopy

Reputation: 366

Exclude an element from css transition with the same property

I want to exclude an element from the transition effect within a group. Below is the code:

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;
}

Upvotes: 0

Views: 2009

Answers (2)

PJ.Wanderson
PJ.Wanderson

Reputation: 1862

Your transition is applied to parent element, in this case .container, so there's no way to remove the effect on children.

What you need to do, is apply the effect on the children directly, and skip the one you want to avoid.

If you want to apply the transition effect on children when user click on the parent, just go with something like this:

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>

Upvotes: 2

Dai
Dai

Reputation: 155045

Use the :not() selector function:

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

Or clear the transition property for .exclude by using a selector with a higher specificity:

.container > * {
    transition: etc
}

.container > .exclude {
    transition: none;
}

Or just use !important (which you should always avoid using):

.container {
    transition: etc
}

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

Upvotes: 2

Related Questions