CSS 선택자 자식 요소 개수 확인하기

CSS 선택자(Selector) 중에 :nth-child와 :nth-last-child를 이용하면 자식 형제 요소의 갯수에 따라 스타일을 다르게 지정할 수 있습니다. 이 선택자는 IE9부터 지원 가능합니다.

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

코드에서 사용된 원리는 다음과 같습니다.

li요소들이 여러 개 있다고 가정할 때, li의 첫 번째 자식을 기준으로 마지막 자식부터 n번째 위치에 있는 자식을 찾습니다.

뒤에서부터 n번째 위치에 있는 자식이 첫번째 자식과 일치할 경우, 자식의 개수는 정확히 n개이므로 코드가 실행됩니다. 이 조건은 적어도 n개의 자식 요소가 존재할 때만 참이 됩니다.

두 번째 셀렉터는 나머지 형제 요소들을 선택하여 같은 css를 적용하는 역할을 합니다.

 

이를 간략화하여 자식 요소의 개수를 n 개라 했을 때 모든 요소에 같은 효과를 적용하고 싶다면 다음과 같이 작성하면 됩니다.

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