Style odd and even number of div children - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Div

Description

Style odd and even number of div children

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
.row, .group {<!-- w ww  .jav  a2s  .com-->
   height:21px;
}

.row:nth-child(odd) {
   background-color:Chartreuse;
}

.row:nth-child(even) {
   background-color:yellow;
}
</style> 
 </head> 
 <body> 
  <div class="group">
    This is a group 
  </div> 
  <div class="group">
    This is a group 
  </div> 
  <div class="group subgroup">
    This is a subgroup 
  </div> 
  <div class="wrap"> 
   <div class="row">
     This is the first row 
   </div> 
   <div class="row">
     This is the second row 
   </div> 
   <div class="row">
     This is the third row 
   </div> 
   <div class="row">
     This is the forth row 
   </div> 
  </div> 
  <div class="group">
    This is a group 
  </div> 
  <div class="group subgroup">
    This is a subgroup 
  </div> 
  <div class="wrap"> 
   <div class="row">
     This is the first row 
   </div> 
  </div> 
  <div class="group">
    This is a group 
  </div> 
  <div class="group subgroup">
    This is a subgroup 
  </div> 
  <div class="wrap"> 
   <div class="row">
     This is the first row 
   </div> 
   <div class="row">
     This is the second row 
   </div> 
   <div class="row">
     This is the third row 
   </div> 
  </div> 
  <div class="group">
    This is a group 
  </div> 
  <div class="group subgroup">
    This is a subgroup 
  </div> 
  <div class="wrap"> 
   <div class="row">
     This is the first row 
   </div> 
   <div class="row">
     This is the second row 
   </div> 
   <div class="row">
     This is the third row 
   </div> 
   <div class="row">
     This is the forth row 
   </div> 
   <div class="row">
     This is the fifth row 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials