Home/ Questions/Q 9213867
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T01:50:55+00:00

I am currently making something like this: <div id=container> <div class=gridTab> Home </div> <div

  • 0

I am currently making something like this:

<div id="container">
 <div class="gridTab">
  Home
 </div>
 <div class="gridTab">
  Work
 </div>
 <div class="gridTab">
  Gallery
 </div>
 <div class="gridTab">
  Contact
 </div>
</div>

That each “gridTab” should have different colour. From the top to bottom.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use nth-child pseudo class

    .gridTab:nth-child(1){background:red}
.gridTab:nth-child(2){background:lime}
.gridTab:nth-child(3){background:green}
.gridTab:nth-child(4){background:violet}

    DEMO

    If you are looking for IE9 below solution then use the following method

    For IE7+ Support

    .gridTab:first-child {background:red}
.gridTab:first-child + div.gridTab{background:lime}
.gridTab:first-child + div + div.gridTab{background:green}
.gridTab:first-child + div + div + div.gridTab{background:violet}

    DEMO for IE7+

    • 0