1. &: 현재 요소에 적용 ( &: 현재요소 )
[&:nth-child(3)]: 이 구문은 현재 요소의 세 번째 요소를 선택합니다.
<ul role="list">
{#each items as item}
<li class="[&:nth-child(3)]:underline">{item}</li>
{/each}
</ul>2. &_ 현재 요소의 모든 자손 요소에 적용 ( &_ 자손요소 )
아래의 예제는 <p>Lorem ipsum...</p>이 포함된 모든 <p>태그들에 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>참조
May 23, 2024
Views 574