Odd Even style in CSS

<style type="text/css">

    .timeline-centered .timeline-entry:nth-of-type(odd) .timeline-entry-inner .timeline-name {
        background-color: #fad839;
    }

    .timeline-centered .timeline-entry:nth-of-type(even) .timeline-entry-inner .timeline-name {
        background-color: #21a9e1;
    }

    .timeline-label{
        height: 10px;
    }

</style>

<div class="timeline-centered" id="ulnotifications">

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

    <article class="timeline-entry">
        <div class="timeline-entry-inner">
            <div class="timeline-name">MaHiiiiiiiiiiii</div>
            <div class="timeline-label"></div>
        </div>
    </article>

</div>


Output :)