0

I have an HTML component that has it's opacity dynamically set with VUE. When the parent element (div) has the class opacity-50, the child element opacity is turned into 50%, even having the opacity-100 class with !important modifier.

How can i force the child to have 100% opacity while his parent has 50%?

<!-- HTML -->
<div class="opacity-50">
 <i class="fa-solid fa-plus opacity-100"></i>
 ...A lot more html that needs to be with 50% opacity...
</div>

<style>
.opacity-50{
   opacity: .5;
}
.opacity-50{
   opacity: 1 !important;
}
</style>
Emilio José Pérez Mariscal
  • 31
  • 4
  • you have a type as you have defined `.opacity-50` two times, did you intend to define `.opacity-100` instead? – Tushar Gupta Mar 04 '22 at 13:59
  • opacity-100 class doesn't exist. I think you have a typo in your css because you have two same name classes. – Sanan Ali Mar 04 '22 at 14:01
  • 2
    You can't. The child is dependent on the parent. If the container opacity is 50%, then everything inside it will appear 50% as well. – Sean Stopnik Mar 04 '22 at 14:09
  • You need to separate the 2 elements which you want the opacity to have different value. I agree with Sean as well. – John Mar 04 '22 at 14:13

0 Answers0