[Tailwind CSS] List(목록) 선택자: nth-child

리스트 선택자는 map() 함수로 반복 렌더링하는 컴포넌트에 유용하다.

짝수/홀수 행 요소, 첫/마지막 요소, 빈 상태의 요소의 스타일을 쉽게 설정할 수 있다.

 

 

odd:

: 홀수 요소 선택

• CSS의 nth-child(odd)과 동일하다.
• 사용: 목록의 홀수 요소에 개별 스타일 적용

  <div class="odd:bg-red-500">
    <div>첫 번째</div>
    <div>두 번째</div>
    <div>세 번째</div>
  </div>
  

 

 

even:

: 짝수 요소 선택

• CSS의 nth-child(even)과 동일하다.
• 사용: 목록의 짝수 요소에 개별 스타일 적용

  <div class="even:bg-green-100">
    <div>첫 번째</div>
    <div>두 번째</div>
    <div>세 번째</div>
  </div>
  

 

 

first:

: 첫 번째 요소 선택

• 사용: 첫 번째 요소에만 다른 스타일 적용

  <div class="first:font-bold">
    <div>첫 번째</div>
    <div>두 번째</div>
    <div>세 번째</div>
  </div>
  

 

 

last:

: 마지막 요소 선택

• 사용: 테이블이나 리스트에서 마지막 요소에 특정 스타일 제거 또는 적용

  <div class="border-b-2 last:border-0">
    <div>첫 번째</div>
    <div>두 번째</div>
    <div>마지막 요소</div>
  </div>
  

 

 

empty:

: 자식 요소가 없는 비어있는 상태의 요소 선택

• 엘리먼트 노드와 공백을 포함한 텍스트 노드 모두 자식으로 간주한다.
• 사용: 비어 있는 카드나 리스트 항목에 기본 스타일 추가

  <div class="text-lg empty:w-24">
    <!-- 자식 요소가 없는 경우 너비를 24로 설정 -->
  </div>
  

 

---

 

 

Handling Hover, Focus, and Other States - Tailwind CSS