[CSS] :nth-last-child() 가상 클래스를 사용해 요소가 x개일 때 전체 선택하기

요구사항

동적으로 li 요소의 개수가 바뀌는 목록이 존재한다. 이 목록은 최대 4개의 li 요소를 가질 수 있다고 가정할 때, 아래의 예시 이미지처럼 li 가 4개일 때만 부모 요소에 꽉차게 스타일링 하려고 한다.

어떻게하면 JavaScript 코드 없이 CSS만으로 li가 4개일 때를 확인하고 다른 스타일링을 적용할 수 있을까?

왼쪽에서부터 요소가 2개일 때, 요소가 3개일 때, 요소가 4개일 때의 결과

기본 UI 코드

<!-- html -->
<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

/* CSS */
html,
body {
  height: 100%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list {
  display: flex;
  flex-direction: column;
  height: 30em;
  border: 5px solid;
}

.item {
  height: 20%;
  margin-bottom: 0.3em;
  background-color: wheat;
}

구현

가상 클래스 :nth-last-child()와 선택자 ~를 응용하면 CSS만으로 간단히 구현할 수 있다.

글을 다 작성하고 나서야 Grid 레이아웃을 사용하는 게 더 모던하고 간단하고 직관적인 방법일 수 있겠단 생각이 들었다...

.item:nth-last-child(n + 4),
.item:nth-last-child(n + 4) ~ .item {
  flex: 1;
  margin-bottom: 0;
  background-color: aliceblue;
}

.item:nth-last-child(n + 4) ~ .item {
  border-top: 1px solid;
}

위의 선택자를 해석하면 다음과 같다.

.item:nth-last-child(n + 4)
마지막에서부터 4번째 즉, 여기서는 목록 중 가장 첫 번째에 있는 .item 요소를 선택한다.

.item:nth-last-child(n + 4) ~ .item
~는 일반 형제 선택자로 A ~ B 패턴일 때, A 요소 뒤에 따라오는 모든 형제 B 요소를 선택한다. 따라서 목록 중 가장 첫 번째에 있는 .item 요소를 뒤따르는 2 ~ 4번째 형제 .item 요소들을 선택하게 된다.

그래서 최종적으로 .item 요소가 4개일 때 전부 선택되고, flex: 1; 의 속성에 의해 부모 영역을 동일한 비율로 꽉 채우게 되는 것이다.

그렇다면 :nth-last-child()가 어떻게 동작하길래 이게 가능한 걸까?

:nth-last-child()

:nth-last-child()는 형제 요소들 중 맨 마지막부터 세어서 특정 위치의 요소를 매칭하는 CSS의 가상 클래스이다. 인자로 숫자 혹은 표현식을 전달하여 매칭 패턴을 지정할 수 있다. 이 때, 표현식에서의 n은 0 혹은 양수를 의미한다.

예시

li:nth-last-child(2)
마지막에서부터 2번째 li 요소를 나타낸다.

li:nth-last-child(2n) 혹은 li:nth-last-child(even)
마지막에서부터 2, 4, 6, ..., 짝수번째의 li 요소를 나타낸다.

li:nth-last-child(2n + 1) 혹은 li:nth-last-child(odd)
마지막에서부터 1, 3, 5, ..., 홀수번째의 li 요소를 나타낸다.

li:nth-last-child(n) 혹은 li:nth-last-child(n + 1)
모든 li 요소를 나타낸다. n이 0부터 시작하고 :nth-last-child()는 맨 아래의 첫 번째 요소부터 카운팅을 하기 때문에, n과 n + 1은 같은 결과를 나타낸다. 이는 단순한 li 선택자와도 동일한 결과이다.

li:nth-last-child(1) 혹은 li:nth-last-child(0n + 1)
마지막에서부터 1번째 li 요소를 나타낸다. 이는 :last-child 선택자와 동일한 결과이다.

li:nth-last-child(-n + 4)
마지막에서부터 4번째까지의 li 요소를 나타낸다. li의 총 개수가 4개 이하라면, 모든 li 요소들을 선택하는 효과를 가진다.

li:nth-last-child(n + 4)
마지막에서부터 4번째 요소에서 시작해 목록의 앞에서 첫 번째 요소까지 전부 선택한다.

다시 결론

이번 요구사항을 구현하기 위해선 하나의 조건이 있어야 한다. 바로 특정 CSS를 적용하고 싶은 요소의 개수를 명확히 알고 있는 것이다. 그럼 이런 응용도 가능해진다.

형제 요소가 x개 이상일 때 전체 선택

li:nth-last-child(n + x), 
li:nth-last-child(n + x) ~ li { 
}

형제 요소가 x개 이하일 때 전체 선택

li:nth-last-child(-n + x) { 
} 
/* 혹은 */ 
li:nth-last-child(-n + x):first-child, 
li:nth-last-child(-n + x):first-child ~ li { 
}

도움
제일 마지막 요소부터 세는 nth-last-child()