Question

I have to style a table like structure that is to be designed using divs and spans.

  <div id="parentdiv">
         <div>
           <span>abc</span>
           <span>bcd</span>
           <span>cde</span>
         </div>
         <div>
           <span>123</span>
           <span>234</span>
           <span>456</span>
         </div>
         <div>
           <span>mno</span>
           <span>nop</span>
           <span>pqr</span>
         </div>
         <div>
           <span>678</span>
           <span>789</span>
           <span>890</span>
         </div>

here i have to style the alternate divs with 2 colors.
css i used was

        #parentdiv div :nth-of-type(2N)
         {
         background-color: #FFF;
         }

        #parentdiv div :nth-of-type(2N+1)
         {
          background-color: #f7f7f7;
         }

here, spans are getting styled.
please help me.
I want only divs to be styled so that alternate rows are colored accordigly.
I hope somebody will help me.
thanks 🙂

Answer 1

Remove the space between div and nth-of-type like so:

    #parentdiv div:nth-of-type(2N)
     {
     background-color: #FFF;
     }

    #parentdiv div:nth-of-type(2N+1)
     {
      background-color: #f7f7f7;
     }

This way it actually refers to the divs, rather than children of the divs.