<h1>CSS <code>:nth-child()</code> pseudo-class</h1>
<p>Very basic examples of how to use the <code>:nth-child()</code> pseudo-class.</p>
<div class="flex-ctnr">
    <ol class="ex1">
        <li>Alpha</li>
        <li>Beta</li>
        <li>Gamma</li>
        <li>Delta</li>
        <li>Epsilon</li>
        <li>Zeta</li>
        <li>Eta</li>
        <li>Theta</li>
        <li>Iota</li>
        <li>Kappa</li>
    </ol>
    <ol class="ex2">
        <li>Alpha</li>
        <li>Beta</li>
        <li>Gamma</li>
        <li>Delta</li>
        <li>Epsilon</li>
        <li>Zeta</li>
        <li>Eta</li>
        <li>Theta</li>
        <li>Iota</li>
        <li>Kappa</li>
    </ol>
    <ol class="ex3">
        <li>Alpha</li>
        <li>Beta</li>
        <li>Gamma</li>
        <li>Delta</li>
        <li>Epsilon</li>
        <li>Zeta</li>
        <li>Eta</li>
        <li>Theta</li>
        <li>Iota</li>
        <li>Kappa</li>
    </ol>
    <ol class="ex4">
        <li>Alpha</li>
        <li>Beta</li>
        <li>Gamma</li>
        <li>Delta</li>
        <li>Epsilon</li>
        <li>Zeta</li>
        <li>Eta</li>
        <li>Theta</li>
        <li>Iota</li>
        <li>Kappa</li>
    </ol>
</div>
<section class="external-resources">
    <h2>Resources for <code>:nth</code></h2>   
    <ul>
        <li>Lea Verou’s - <em>CSS3 structural pseudo-class selector tester</em>: <a href="http://lea.verou.me/demos/nth.html" target="_blank" title="Link opens in a new tab">http://lea.verou.me/demos/nth.html</a></li>
        <li>CSS-Tricks’ - <em>:nth Tester</em>: <a href="https://css-tricks.com/examples/nth-child-tester/" target="_blank" title="Link opens in a new tab">https://css-tricks.com/examples/nth-child-tester/</a></li>
    </ul>
</section>

//1. Select the second child. Only Beta will be red
.ex1 :nth-child(2) { color: #2963BD; }

//2. Select every other child starting with the second. Beta, Delta, Zeta, Theta and Kappa will be red
.ex2 :nth-child(2n) { color: #429032; }
//Which is the same as selecting all EVEN child elements
.ex2 :nth-child(even) { color: #429032; }

//3. Select every other child starting with the first. Alpha, Gamma, Epsilon, Eta and Iota will be red
.ex3 :nth-child(2n+1) { color: #c03; }
//Which is the same as selecting all ODD child elements
.ex3 :nth-child(odd) { color: #c03; }

//4. Select every other child starting from the sixth. Zeta, Theta and Kappa will be red:
.ex4 :nth-child(2n+6) { color: #c90; }


//Styling stuff not needed for demo
h1 {
    text-transform: none;
    border-bottom: #636363 1px dotted;
    code {
        display: inline-block;
        margin-bottom: 10px;
        color: $y;
        background: none;
        box-shadow: none;
    }
}
code { font-size: .8em; }
ol {
    width: 200px;
    margin: 10px 10px 30px;
    padding: 20px 20px 10px 50px;
    border-radius: 2px;
    text-align: left;
    font-size: 1em;
    background: rgba(black,.2);
    position: relative;
    &:before {
        display: inline-block;
        padding: 10px;        
        position: absolute;
        top: -27px; left: 0;
        line-height: .5;
        color: rgba(white,.6);
        font-size: 14px;
        border-radius: 5px 5px 0 0;
        background: rgba(black,.5);
    }    
}
.ex1:before { content: "example 1"; color: $b; }
.ex2:before { content: "example 2"; color: $g; }
.ex3:before { content: "example 3"; color: $r; }
.ex4:before { content: "example 4"; color: $y; }

.flex-ctnr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
    margin: 60px auto 0;
}
.external-resources {
    text-align: left;
}