How we apply parent class with odd even logic-CodePudding

Please let me know how can I apply CSS odd even logic only for each first parent section element. I want to apply the dynamic odd even class only for the parent section.

<section>
     <section>
          <section>
               <section>
                
               </section>
          </section>
     </section>
</section>
<section>
     <section>
          <section>
               <section>
                
               </section>
          </section>
     </section>
</section>
<section>
     <section>
          <section>
               <section>
                
               </section>
          </section>
     </section>
</section>

Thanks

CodePudding user response：

You can use class for parent container

    <section >
         <section>
              <section>
                   <section>
                    
                   </section>
              </section>
         </section>
    </section>
    <section >
         <section>
              <section>
                   <section>
                    
                   </section>
              </section>
         </section>
    </section>
    <section >
         <section>
              <section>
                   <section>
                    
                   </section>
              </section>
         </section>
    </section>

and the apply this style

.parent:nth-child(odd) {
     // CSS properties for odd
 }
        
 .parent:nth-child(even) {
       // CSS properties for even
  }

CodePudding user response：

i have shared my opinion :

without class name : Link : https://jsfiddle.net/htorxek4/

with class name : Link : https://jsfiddle.net/n4djyu31/

Html Code :

     <section>
     <section>
          <section>
               <section>
                1 section
               </section>
          </section>
     </section>
</section>

    <section>
         <section>
              <section>
                   <section>
                    2 section
                   </section>
              </section>
         </section>
    </section>
    <section>
         <section>
              <section>
                   <section>
                    3 section
                   </section>
              </section>
         </section>
    </section>
    <section>
         <section>
              <section>
                   <section>
                    4 section
                   </section>
              </section>
         </section>
    </section>

Css Code :

section:nth-child(odd) {
   background: red;
}

section:nth-child(even) {
   background: lightgreen;
}
section section {
  background: none !important;
}