Totally puzzled by this very basic rules of giving a background color differently to odd and even to each list element (each <li>
)
In the rendered html code, ALL li are seen as odd.. ?????? so they all got the same background color instead of the needed alternate one.
Thank for any help.
<div id="technotes" class="block nb-coul well">
<div class="block-in">
<ul id="blocNotesTech">
<li class="oneFile gc tips ">
<a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong> »
</a> <span class="tout-pt-txt small">(0.16 Mo) </span><br>
<cite class="tout-pt-txt"><em>azertyui...</em>
</cite>
</li><br>
<li class="oneFile hplc ">
<a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong> »
</a> <span class="tout-pt-txt small">(0.16 Mo) </span><br>
<cite class="tout-pt-txt"><em>azertyui...</em>
</cite>
</li><br>
<li class="oneFile gc tips ">
<a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong> »
</a> <span class="tout-pt-txt small">(0.16 Mo) </span><br>
<cite class="tout-pt-txt"><em>azertyui...</em>
</cite>
</li><br>
<li class="oneFile hplc ">
<a target="_blank" rel="tooltip" href="http:xxxx.pdf" title="" data-original-title="Enregistrer ce document (nl onglet) "><strong>xxxxxxxxxxxxxxxxx </strong> »
</a> <span class="tout-pt-txt small">(0.16 Mo) </span><br>
<cite class="tout-pt-txt"><em>azertyui...</em>
</cite>
</li><br>
</ul>
</div>
and the css that applies (tried different ways):
#technotes li{
display: inline-block;
background: none;
background-position: center left!important;
padding: 43px 2px 43px 72px!important;
font-size: 130%;
border-bottom: 1px blue !important;
}
#technotes li.hplc{
background-image: url(../img/TechNoteHPLC-ico.png);
background-repeat: no-repeat;
}
#technotes li.hplc-usp{
background-image: url(../img/TechNoteHPLCUSP-ico.png);
background-repeat: no-repeat;
}
#technotes li.gc{
background-image: url(../img/TechNoteGC-ico.png);
background-repeat: no-repeat;
}
#technotes ul > li:nth-child(odd){
background-color: #f9f9f9;
}
#technotes ul > li:nth-child(even){
background-color: #ECEDE6;
}