CODEWITHSUNDEEP
javascriptcssvue.jssassvuejs2
Dexter
Dexter

Reputation: 528

How to detach the parent dynamic class css in vue.js 2

here my issue is i am applying a dynamic class and in which opacity is there in parent class and due to it is also applying to the div's in it and for 1 specific div i dont need this dynamic opacity how can i alter it.

below is my code

css

.cancelled {
    opacity: 0.25;
  }

Vue

In Methods is mentioned the condition like below

 <section
      class="checkitem"
      v-for="(item, index) in data"
      :key="index"
      :class="getProgram(index, item)"
    >
    <div class="class1"> </div>
    <div class="class2"> </div>
    <div class="class3"> </div>
  </section>

here getProgram(index, item) has a opacity and it is adding it to the class1,class2 so here i dont want opacity to be added to class1 & class 2

Methods :--

 getProgram(index, item) {
      return [{ cancelled: item.cancelled }];
    },

Upvotes: 1

Views: 206

Answers (3)

Anton
Anton

Reputation: 2703

We already have an answer in comments. I will just put it as an answer.

All child element’s will always inherit their parent's opacity, and can never be greater. (c) Ferry Kranenburg

Looks like you don't understand how CSS works. If a parent has opacity: 0.25; it means all html inside that will inherit this style. If you don't want class1 and class2 to inherit this opacity then you need to render them outside of the parent. (c) Adam Orlov

So the problem here is that: if you add opacity to parent class, then all items inside will have this opacity's maximum value.

Solution: do not add opacity to parent class, but to children. So for your original question here i dont want opacity to be added to class1 & class 2, you just need to update the CSS:

.cancelled .class3 {
    opacity: 0.25;
}

So that only class3 will have the opacity, but not class1 and class2 as you want.

Possible problem: you can have some stylings applied to parent and you want them to be also semi-transparent (background or something other).

Then you need to move all this stuff to new inner element:

 <section
      class="checkitem"
      v-for="(item, index) in data"
      :key="index"
      :class="getProgram(index, item)"
    >
    <div class="all-the-stylings-from-parent-go-here"></div>
    <div class="class1"> </div>
    <div class="class2"> </div>
    <div class="class3"> </div>
  </section>

And so the CSS will be:

.cancelled .class3, .cancelled .all-the-stylings-from-parent-go-here {
    opacity: 0.25;
}

Upvotes: 1

Zibx
Zibx

Reputation: 94

  1. Set the sections style to opacity: 1; position:relative;
  2. Create an additional inner div that would not wrap current children and apply all styles from section to it (you can use checkitem class for it). Then change this div opacity as you want.
 <section
      class="checkitem__wrapper"
      v-for="(item, index) in data"
      :key="index"
    >
    <div class="checkitem" :class="getProgram(index, item)"></div>
    <div class="class1"> </div>
    <div class="class2"> </div>
    <div class="class3"> </div>
  </section>

You need to make additional tuning if you have padding, margin, and border — move them to the .checkitem__wrapper

.checkitem__wrapper {
  position: relative;
}
.checkitem {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
}
.cancelled {
  opacity: 0.25;
}

Upvotes: 1

hatef
hatef

Reputation: 6209

From your question it's not entirely clear what's the criteria for excluding the children from the applied opacity but in CSS you could do something like this:

.cancelled > div:not(.class1):not(.class2){
    opacity: 0.25;
}

This will only apply the opacity to the third div in your example. If you want to do this more dynamically you could apply a class to the child elements and then exclude that class in the CSS selector.

Here is a simple example just to give you an idea:

 <section
     class="checkitem"
     v-for="(item, index) in data"
     :key="index"
     :class="getProgram(index, item)"
 >
    <div class="class1" :class="isExcluded('yes') ? 'is-excluded' : ''">Div 1</div>
    <div class="class2" :class="isExcluded('yes') ? 'is-excluded' : ''">Div 2</div>
    <div class="class3" :class="isExcluded('no') ? 'is-excluded' : ''">Div 3</div>
  </section>

And:

methods: {
    isExcluded(param) {
        return param === 'yes';
    }
}

CSS:

.cancelled > div:not(.is-excluded) {
    opacity: 0.25;
}

Upvotes: 1

Related Questions