[CSS] 엘리먼트 개수를 알아낼 수 있는 선택자

CSS Selector 중 :nth-child와 :nth-last-child를 이용하면, 엘리먼트의 개수에 따라 스타일을 다르게 지정할 수 있다. 첫 번째 엘리먼트가 뒤에서부터 몇 번째 위치하는지 알면 전체 개수를 알 수 있으며,  :nth-child(1):nth-last-child(3)은 총 3개의 엘리먼트가 있다는 것을 나타낸다.

See the Pen vKarzZ by 소지훈 (@sogoonii) on CodePen.

<ul>
    <li>첫번째</li>
    <li>두번째</li>
</ul>

<ul>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
</ul>

<ul>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
    <li>네번째</li>
</ul>

<ul>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
    <li>네번째</li>
    <li>다섯번째</li>
</ul>

<style>
ul {
    overflow: hidden;
    list-style: none;
    padding: 0;
}

li {
    float: left;
    padding: 10px;
    border: 1px solid #000;
    text-align: center;
    box-sizing: border-box;
}

li:nth-child(1):nth-last-child(2),
li:nth-child(1):nth-last-child(2) ~ li {
 width: 50%;
}

li:nth-child(1):nth-last-child(3),
li:nth-child(1):nth-last-child(3) ~ li {
    width: 33.333%;
}

li:nth-child(1):nth-last-child(4),
li:nth-child(1):nth-last-child(4) ~ li {
    width: 25%;
}

li:nth-child(1):nth-last-child(5),
li:nth-child(1):nth-last-child(5) ~ li {
    width: 20%;
}
</style>