CSS 자식 요소의 개수 확인하기

가상 선택자 :first-child :nth-last-child() 두가지를 이용하여 자식;형제 요소의 개수를 찾을 수 있다.

td:first-child:nth-last-child(n) {/*style*/}

tr 아래 td 요소들이 여러개 있다고 할 때, td 의 첫번째 자식을 기준으로 마지막 자식부터 n번째 위치에 있는 자식을 찾는다. 뒤에서부터 n번째 위치에 있는 자식이 첫번째 자식과 일치할 경우, 자식의 개수는 정확히 n개이므로 코드가 실행된다.

모든 요소에 같은 효과를 적용하고 싶다면 다음과 같이 작성하면 된다.

td:first-child:nth-last-child(n),
td:first-child:nth-last-child(n) ~ td {/*style*/}

이때 특정 태그 혹은 클래스 하위 요소에 적용하려 한다면 가상 선택자 앞에만 부모-자식 순으로 태그를 입력해주면 된다. 즉, 틸드 ~ 뒤에 오는 태그는 적용 태그의 이름만 작성해주어야 한다.