CSS로 자식 요소 갯수 알아내기

CSS로 형제 요소 갯수 알아내기

소개

문서 원본 바로가기 (게시일: 2014년 6월 10일)

CSS로 형제 요소 갯수를 알아내는 방법은 2009년 André Luís가 포스팅을 통해 처음 제안하였고, 2년 후에 Lea Verou가 보완하였습니다. 알아 둘 만한 가치가 있다고 생각합니다. 본 기법은 다양하게 응용될 수 있는데, 원본 문서에서는 li 요소 갯수에 따라 블록 안의 배경색을 다르게 매기는 것을 예시로 들었습니다. (flexbox를 사용할 수 없는 환경이라고 가정합니다.)

다음 코드에서는 float:left를 사용하여 li 요소들을 띄운 상태입니다.

li {
    float: left;
}

/* 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가 세개일 때 */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%
}

/* li가 네개일 때*/
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

코드에서 사용된 원리는 다음과 같습니다. 우선 첫 번째 셀렉터에서는 리스트 안에 오는 li 중에 첫 번째 자식을 선택하는데, nth-last-child() 셀렉터를 그 뒤에 바로 붙여 사용함으로써 리스트 안의 자식 요소 갯수에 따른 스타일 분기문 역할로 사용할 수 있습니다. 이 조건은 적어도 n개의 자식요소가 존재할 때만 참이 됩니다. 두번째 셀렉터는 나머지 형제 요소들을 선택하여 같은 css를 적용하는 역할을 합니다.

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

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