<h1>CSS <code>:not()</code> pseudo-class</h1>
<p>The <code>:not()</code> pseudo-class is also known as the negation pseudo-class.</p>
<p>It’s useful to exclude elements from a particular selection.</p>
<div class="flex-ctnr">
    <ul class="ex1">
        <li class="first-item">Example 1</li>
        <li>All text is red, except the <code>&lt;li></code> with the class <code>.first-item</code></li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>
    <ul class="ex2">
        <li class="first-item">Example 2</li>
        <li>All elements will have <strong>black text</strong> and <strong>orange background</strong>, except the <code>&lt;li></code> with the class <code>.first-item</code> and the last <code>&lt;li></code> of the list</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>
</div>

//1. All text is red, except the <li> with the class .first-item
.ex1 li:not(.first-item) {
    color: red;
}

//2. All elements will have black text and a yellow background, except the <li> with the class .first-item and the last <li> of the list
.ex2 li:not(.first-item):not(:last-of-type) {
    background: orange;
    color: black;
}





//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;
    }
}
ul {
    width: 400px;
    margin: 40px auto 0;
    padding: 20px 20px 10px 50px;
    border-radius: 2px;
    text-align: left;
    font-size: 22px;
    background: rgba(black,.2);
    color: $b;
}
.ex2 {
    code { color: #333; }
    li { border-radius: 2px; }
}
li { padding: 5px; margin: 0 0 5px; }
code { font-size: .8em; }
.flex-ctnr {
    display: flex;
    flex-wrap: wrap;
    max-width: 900px;
    margin: auto;
}