[TailwindCSS] Pseudo classes - 자식 및 후손 상태에 따른 스타일링

Tailwind CSS를 사용하면 자식 요소나 후손 요소의 상태에 따라 특정 요소를 스타일링할 수 있다. 이를 위해 다양한 수정자를 사용할 수 있다. 아래는 각각의 수정자를 활용한 예시를 통해 이를 설명한다.

1. 자식 요소 스타일링 (*-{modifier})

자식 요소를 직접 제어할 수 없는 상황에서 * 수정자를 사용하여 자식 요소를 스타일링할 수 있다.

예시:

<div>
  <h2>Categories</h2>
  <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
    <li>Sales</li>
    <li>Marketing</li>
    <li>SEO</li>
    <!-- ... -->
  </ul>
</div>

주의: 자식 요소가 직접 자신의 스타일을 덮어쓰는 것은 특정성 때문에 작동하지 않는다.

2. 후손 요소의 상태에 따른 스타일링 (has-{modifier})

후손 요소의 상태나 내용을 기반으로 요소를 스타일링할 수 있다.

예시:

<label class="has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200 ...">
  <svg fill="currentColor">
    <!-- ... -->
  </svg>
  Google Pay
  <input type="radio" class="checked:border-indigo-500 ..." />
</label>

후손 요소가 특정 상태일 때 부모 요소에 스타일을 적용할 수 있다. 예를 들어, 자식 요소가 체크된 경우(:checked) 부모 요소에 스타일을 적용한다.

3. 그룹 후손 요소의 상태에 따른 스타일링 (group-has-{modifier})

부모 요소의 후손 요소 상태에 따라 다른 요소를 스타일링할 수 있다. 이를 위해 부모 요소에 group 클래스를 추가하고, group-has-* 수정자를 사용한다.

예시:

<div class="group ...">
  <img src="..." />
  <h4>Spencer Sharp</h4>
  <svg class="hidden group-has-[a]:block ...">
    <!-- ... -->
  </svg>
  <p>Product Designer at <a href="...">planeteria.tech</a></p>
</div>

위 예시에서는 후손 요소 <a>가 존재할 때 svg 요소를 표시한다.

4. 피어 후손 요소의 상태에 따른 스타일링 (peer-has-{modifier})

형제 요소의 후손 요소 상태에 따라 특정 요소를 스타일링할 수 있다. 이를 위해 형제 요소에 peer 클래스를 추가하고, peer-has-* 수정자를 사용한다.

예시:

<fieldset>
  <legend>Today</legend>

  <div>
    <label class="peer ...">
      <input type="checkbox" name="todo[1]" checked />
      Create a to do list
    </label>
    <svg class="peer-has-[:checked]:hidden ...">
      <!-- ... -->
    </svg>
  </div>
</fieldset>

위 예시에서는 형제 요소의 후손 요소가 체크된 상태일 때 svg 요소를 숨긴다.