css - DIV color not displaying properly in IE -

i developing application in oracle apex custom theme.

application run in browser except ie, ie doesn't show color expecting.

this result comes chrome browser.

now in internet explorer 8 (ie8) messed up, color effect not displaying properly.

here css 1,2,3,4 <div>

.top-tabs .tab:nth-child(1),.head1 .region-header {    background-color: #014fa2; }  .top-tabs .tab:nth-child(2),.head2 .region-header {    background-color: #1e69b9; }  .top-tabs .tab:nth-child(3),.head3 .region-header {    background-color: #3481d2; }  .top-tabs .tab:nth-child(4),.head4 .region-header {    background-color: #58a1f0; } 

here html

<ul class="top-tabs">     <li class="tab">       <a href="#">         <div class="top-tab-nr">1</div>         <div class="top-tab-label">admission<br>application</div>       </a>     </li>      <li class="tab">       <a href="#">         <div class="top-tab-nr">2</div>         <div class="top-tab-label">pay<br>application fee</div>       </a>     </li>      <li class="tab">       <a href="#">         <div class="top-tab-nr">3</div>         <div class="top-tab-label">submit<br>required documents</div>       </a>     </li>      <li class="tab">       <a href="#">         <div class="top-tab-nr">4</div>         <div class="top-tab-label">sign up<br>information</div>       </a>     </li> </ul> 

any / guideline overcome ??

no javascript necessary...

option a
give each list item class, same way did headers.

option b
use + (adjacent sibling) selector. this:

.top-tabs .tab:first-child,.head1 .region-header {    background-color: #014fa2; }  .top-tabs .tab:first-child + .tab,.head2 .region-header {    background-color: #1e69b9; }  .top-tabs .tab:first-child + .tab + .tab,.head3 .region-header {    background-color: #3481d2; }  .top-tabs .tab:first-child + .tab + .tab + .tab,.head4 .region-header {    background-color: #58a1f0; } 

try out: http://jsfiddle.net/3q9cd/