Hihglight nth item and center list on this item

by feeela

HTML

<h3>Highlight second item</h3>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
    </ul>
</div>

<div class="slider item-2">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur culpa dolore</li>
        <li>Ducimus facilis ipsam itaque</li>
    </ul>
</div>

<hr/>

<h3>Highlight third item</h3>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
    </ul>
</div>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
    </ul>
</div>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
    </ul>
</div>

<div class="slider item-3">
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Alias aspernatur</li>
        <li>Assumenda atque aut consectetur</li>
        <li>Consequatur...

CSS

hr {
    /* visual sugar */
    margin-top: 5em;
    margin-bottom: 5em;
}

.slider {
    overflow: hidden;
}

.slider > ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    white-space: nowrap;
}

.slider > ul li {
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    margin-left: -4px;
    min-height: 5rem;
    white-space: normal;
    border: 1px solid black;
}
.slider > ul li:first-child {
    margin-left: 0;
}

/* The following sections sets the slider item widths */

/* two items */
.slider > ul li:first-child:nth-last-child(2),
.slider > ul li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
.slider > ul li:first-child:nth-last-child(3),
.slider > ul li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* four items */
.slider > ul li:first-child:nth-last-child(4),
.slider > ul li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

/* five items */
.slider > ul li:first-child:nth-last-child(5),
.slider > ul li:first-child:nth-last-child(5) ~ li {
    width: 20%;
}

/* six items */
.slider > ul li:first-child:nth-last-child(6),
.slider > ul li:first-child:nth-last-child(6) ~ li {
    width: 16.6666%;
}

/* N items – expand as required… */



/* Highlight a specific item */
.slider.item-2 > ul li:nth-child(2),
.slider.item-3 > ul li:nth-child(3),
.slider.item-4 > ul li:nth-child(4),
.slider.item-5 > ul li:nth-child(5),
.slider.item-6 > ul li:nth-child(6) {
    background: yellow;
}


/* This sections centers a specific item */

/* Second item
  Notes:
  - The second item of three is already in the middle
*/
.slider.item-2 > ul li:first-child:nth-last-child(2) {
    margin-left: -25%;
}
.slider.item-2 > ul li:first-child:nth-last-child(4) {
    margin-left: 12.5%;
}
.slider.item-2 > ul li:first-child:nth-last-child(5) {
    margin-left: 20%;
}
.slider.item-2 > ul li:first-child:nth-last-child(6) {
    margin-left: 25%;
}

/* Third item
  Notes:
  - No third item in a list of two
...