Apply CSS background color to nth child 3 to 10 - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-color

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-color

Description

Apply CSS background color to nth child 3 to 10

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.container>div{
   display:block;
   background-color: red;
   width:150px;
   height: 10px;
   margin-top: 5px;
}
.container>div:nth-child(n+3){
   background : green;
}


      </style> 
 </head> <!--from  w  ww  .ja va2 s  .  c om-->
 <body> 
  <div class="container"> 
   <div class="roundperiodbg" id="roundPeriod1" title="PERIOD 1"></div> 
   <div class="roundperiodbg" id="roundPeriod2" title="PERIOD 1"></div> 
   <div class="roundperiodbg" id="roundPeriod3" title="PERIOD 2"></div> 
   <div class="roundperiodbg" id="roundPeriod4" title="PERIOD 2"></div> 
   <div class="roundperiodbg" id="roundPeriod5" title="PERIOD 2"></div> 
   <div class="roundperiodbg" id="roundPeriod6" title="PERIOD 2"></div> 
   <div class="roundperiodbg" id="roundPeriod7" title="PERIOD 2"></div> 
   <div class="roundperiodbg" id="roundPeriod8" title="PERIOD 2"></div> 
   <div class="roundperiodbg" id="roundPeriod9" title="PERIOD 2"></div> 
   <div class="roundperiodbg" id="roundPeriod10" title="PERIOD 2"></div> 
   <div class="roundperiodbg" id="roundPeriod11" title="PERIOD 3"></div> 
   <div class="roundperiodbg" id="roundPeriod12" title="PERIOD 3"></div> 
   <div class="roundperiodbg" id="roundPeriod13" title="PERIOD 3"></div> 
   <div class="roundperiodbg" id="roundPeriod14" title="PERIOD 3"></div> 
   <div class="roundperiodbg" id="roundPeriod15" title="PERIOD 3"></div> 
   <div class="roundperiodbg" id="roundPeriod16" title="PERIOD 3"></div> 
   <div class="roundperiodbg" id="roundPeriod17" title="PERIOD 3"></div> 
   <div class="roundperiodbg" id="roundPeriod18" title="PERIOD 3"></div> 
  </div>  
 </body>
</html>

Related Tutorials