I do not want to inherit the child opacity from the parent in CSS

Question

I do not want to inherit the child opacity from the parent in CSS.

I have one div which is the parent, and I have another div inside the first div which is the child

Answer 1

Assign opacity 1.0 to the child recursively with:

div > div { opacity: 1.0 }

Example:

div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }

  

    

      

         Example Text - No opacity definition
      
    
  
  


  

    

      

        Example Text - 50% opacity inherited
      
    
  
  


  

    

      

         Example Text - 50% opacity not inherited
      
    
  
  


  Example Text - 50% opacity