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%;
}

li:first-child:nth-last-child()

• li중에 첫 번째 자식을 선택, nth-last-child() 를 그 뒤에 바로 붙여
  리스트 안의 자식 요소 갯수에 따른 스타일 분기문 역할을 한다.
• 이 조건은 적어도 n개의 자식요소가 존재할 때 참이 된다.

li:first-child:nth-last-child() ~ li

• 나머지 형제 요소들을 선택, 같은 CSS 를 적용한다.

 

이를 간략화하여 자식 요소의 갯수를 n개라 했을 때 코드는 다음과 같다.

li:first-child:nth-last-child(n),
li:first-child:nth-last-child(n) ~ li {
    width: 1 / n * 100%;
}