Odd even not working in css -

Odd even not working in css -

class="snippet-code-css lang-css prettyprint-override">.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon:nth-of-type(odd) { background-color: #fad839; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon:nth-of-type(even) { background-color: #21a9e1; } class="snippet-code-html lang-html prettyprint-override"><div class="timeline-centered" id="ulnotifications"> <article class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"></div> <div class="timeline-label"> <h2><a href="#" id="anoti" notiid="162d3607-a71e-1803-228d-5434df80a346" style="text-decoration: none; color:#fff" class="ui-link">gaurav bansal joined life group.</a></h2> </div> </div> </article> <article class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"></div> <div class="timeline-label"> <h2><a href="#" id="anoti" notiid="6cef2b1b-b478-6a08-7488-5433dd7399b8" style="text-decoration: none; color:#fff" class="ui-link">aravind m joined life group.</a></h2> </div> </div> </article> <article class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"></div> <div class="timeline-label"> <h2><a href="#" id="anoti" notiid="b23190cc-af8a-1c10-bf76-5433be250268" style="text-decoration: none; color:#fff" class="ui-link">elca bs joined life group.</a></h2> </div> </div> </article> <article class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"></div> <div class="timeline-label"> <h2><a href="#" id="anoti" notiid="d8c28074-aedf-da68-624d-5433b19801ae" style="text-decoration: none; color:#fff" class="ui-link">vin katyal joined life group.</a></h2> </div> </div> </article> <article class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"></div> <div class="timeline-label"> <h2><a href="#" id="anoti" notiid="54f80046-cc56-1838-0483-543386f544c7" style="text-decoration: none; color:#fff" class="ui-link">vin katyal joined life group.</a></h2> </div> </div> </article> <article class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"></div> <div class="timeline-label"> <h2><a href="#" id="anoti" notiid="d387b5e0-12bf-05c8-d9f1-54338337e970" style="text-decoration: none; color:#fff" class="ui-link">vin katyal joined life group.</a></h2> </div> </div> </article> <article class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"></div> <div class="timeline-label"> <h2><a href="#" id="anoti" notiid="e36357e7-c6b4-49ec-d4cf-542cf4af3d81" style="text-decoration: none; color:#fff" class="ui-link">catherine rodrigues added wife</a></h2> </div> </div> </article> <article class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"></div> <div class="timeline-label"> <h2><a href="#" id="anoti" notiid="ea9fd63b-863d-6fc1-c98e-542bbdacaff4" style="text-decoration: none; color:#fff" class="ui-link">gh</a></h2> </div> </div> </article> <article class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"></div> <div class="timeline-label"> <h2><a href="#" id="anoti" notiid="62e00001-cc6d-3e3b-397b-542b9733b5ed" style="text-decoration: none; color:#fff" class="ui-link">g</a></h2> </div> </div> </article> <article class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"></div> <div class="timeline-label"> <h2><a href="#" id="anoti" notiid="b78ba209-aede-34b9-317b-542b80a3ef44" style="text-decoration: none; color:#fff" class="ui-link">jasdjasd</a></h2> </div> </div> </article> </div>

it shows me yellowish color odd field , not one.

please help

you selecting , odd .timeline-icon elements. there 1 icon each entry, each icon's index 1 , considered odd.

i suggest selecting icons within , odd .timeline-entry elements instead, so:

class="lang-css prettyprint-override">.timeline-centered .timeline-entry:nth-of-type(odd) .timeline-entry-inner .timeline-icon { background-color: #fad839; } .timeline-centered .timeline-entry:nth-of-type(even) .timeline-entry-inner .timeline-icon { background-color: #21a9e1; }

working example

edit:

applied posted fiddle, looks this.

css