SIBLING - PREVIOUS - CUSTOM CLASS - BIZAMAJIG USAGE

by bizamajig

HTML

<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>
<div class="stages stages-4">
    <label>1</label>
    <label>2</label>
    <label>3</label>
    <label>4</label>
    <label>5</label>
    <label>6</label>
    <label>7</label>
    <label>8</label>
    <label>9</label>
</div>

CSS

.stages > label {
    display: inline-block;
    padding: 20px 28px;
    margin-right: 5px;
    border: 1px solid #bbb;
    background: #ddd;
    color: #444;
    margin: 0.4em 0;
}

.stages.stages-1 > label:nth-child(-n+1) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-2 > label:nth-child(-n+2) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-3 > label:nth-child(-n+3) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-4 > label:nth-child(-n+4) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-5 > label:nth-child(-n+5) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-6 > label:nth-child(-n+6) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-7 > label:nth-child(-n+7) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-8 > label:nth-child(-n+8) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-9 > label:nth-child(-n+9) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-10 > label:nth-child(-n+10) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-11 > label:nth-child(-n+11) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-12 > label:nth-child(-n+12) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-13 > label:nth-child(-n+13) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-14 > label:nth-child(-n+14) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-15 > label:nth-child(-n+15) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}
.stages.stages-16 > label:nth-child(-n+16) {
  ...