CSS 형제요소로 개수 알아내기 (개수 별 스타일적용)
/* li가 하나일 때 */ li:first-child:nth-last-child(1) { width: 100%; }
/* li가 두개일 때 */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li { width: 50%; }
/* li가 3개일 때 */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; }
/* li가 4개일 때 */ li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { width: 25%; }
<ul style="list-style-type: disc;" data-ke-list-type="disc"> <li><code>li</code>중에 첫 번째 자식을 선택, <code>nth-last-child()</code> 를 그 뒤에 바로 붙여 <br />리스트 안의 자식 요소 갯수에 따른 <span style="color: #006dd7;" data-darkreader-inline-color=""><b>스타일 분기문 역할</b></span>을 한다.</li> <li>이 조건은 적어도 n개의 자식요소가 존재할 때 참이 된다.</li> </ul> </li> > <code>li:first-child:nth-last-child() ~ li</code> <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li>나머지 형제 요소들을 선택, 같은 CSS 를 적용한다.</li> <p data-ke-size="size16"> </p> <p data-ke-size="size16">이를 간략화하여 자식 요소의 갯수를 n개라 했을 때 코드는 다음과 같다.</p> <pre class="css"><code>li:first-child:nth-last-child(n), li:first-child:nth-last-child(n) ~ li { width: 1 / n * 100%; }</code></pre><code>li:first-child:nth-last-child()</code>