tailwindcss의 선택자

1. &: 현재 요소에 적용 ( &: 현재요소 )

[&:nth-child(3)]: 이 구문은 현재 요소의 세 번째 요소를 선택합니다.

<ul role="list">
  {#each items as item}
    <li class="[&:nth-child(3)]:underline">{item}</li>
  {/each}
</ul>

2. &_ 현재 요소의 모든 자손 요소에 적용 ( &_ 자손요소 )

아래의 예제는 Lorem ipsum...이 포함된 모든 태그들에 mt-4가 적용됨

<div class="[&_p]:mt-4">
  <p>Lorem ipsum...</p>
  <ul>
    <li>
      <p>Lorem ipsum...</p>
    </li>
    <!-- ... -->
  </ul>
</div>

3. &> 현재 요소의 바로 아래 자식요소에 적용 ( &> 바로아래 자식요소)

아래의 예제는 모든 li태그에 적용된다

의미적으로 보면 &>* 도 아래 예제에선 사용가능하다

<ul role="list" class="[&>li]:p-4">
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

---

참조

공식문서

선택자정리(일본어)