본문 바로가기
Tailwind CSS

3. Tailwind CSS 의사 클래스(Pesudo classes), 의사 요소(Pesudo elements)

by spare8433 2024. 4. 28.

Tailwind CSS 선택자

 

Tailwind CSS 의 모든 유틸리티 클래스는 대상으로 삼으려는 조건을 설명하는 선택자를 클래스 이름 시작 부분에 추가하여 조건부로 적용할 수 있습니다.

 



의사 클래스 (Pseudo-classes), 의사 요소 (Pseudo-elements) 에서 "의사" 라는 표현은 의사(疑似: 비교할 의, 비슷할 사 | Pseudo: 가짜의- ) 라는 의미이다 유사, 가상의 라고 표현해도 의미를 해석하는데 문제는 없다.




기존 CSS 방식

.btn-primary  {  background-color:  #0ea5e9;  }  
.btn-primary:hover  {  background-color:  #0369a1;  }




Tailwind CSS 방식

<button class="bg-sky-500 hover:bg-sky-700 ..."> Save changes </button>




※ 수정자는 더 구체적인 상황을 대상으로 하기 위해 스택될 수도 있습니다.

 

<button class="dark:md:hover:bg-fuchsia-600 ...">
  Save changes
</button>




1. 의사 클래스 (Pseudo-classes)

 

Pseudo-classes: 선택한 요소의 특수 상태를 지정하는 선택기에 추가된 키워드입니다.

 

1.1 상위 상태를 기반으로 한 스타일 지정 (group-{modifier})

일부 상위 요소의 상태를 기반으로 대상 요소의 스타일을 지정해야 하는 경우 상위 요소를 group 클래스로 표시하고 group-hover 와 같은 group-* 수정자를 사용하여 대상 요소의 스타일을 지정합니다.

 

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
</a>



중첩된 그룹 구별

 

그룹을 중첩할 때 group/{name} 클래스를 사용하여 해당 상위 그룹에 고유한 그룹 이름을 지정하고 group-hover/{name}과 같은 클래스를 사용하여 수정자에 해당 이름을 포함함으로써 특정 상위 그룹의 상태에 따라 항목의 스타일을 지정할 수 있습니다.

 

<ul role="list">
  <li class="group/item hover:bg-slate-100 ...">
    <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
      <span class="group-hover/edit:text-gray-700 ...">Call</span>
    </a>
  </li>
</ul>



임의의 그룹

대괄호 사이에 임의의 값으로 자체 선택자를 제공하여 즉시 일회용 group-* 수정자를 만들 수 있습니다.

 

<div class="group is-published">
  <!-- 그룹 요소가 is-published 클래스를 가지는 경우 이후 스타일 적용 -->
  <div class="hidden group-[.is-published]:block">Published</div>
</div>

 

더 많은 제어를 위해 & 문자를 사용하여 전달하는 선택자와 관련하여 최종 선택기에서 .group 이 끝나야 하는 위치를 표시할 수 있습니다.

 

<div class="group">
  <div class="group-[:nth-of-type(3)_&]:block"><!-- ... --></div>
</div>



1.2 형제 상태를 기반으로 한 스타일 지정 (peer-{modifier})

 

형제 요소의 상태를 기반으로 요소의 스타일을 지정해야 하는 경우 형제를 peer 클래스로 표시하고 Peer-Invalid 와 같은 peer-* 수정자를 사용하여 대상 요소의 스타일을 지정합니다.

 

※ peer 클래스를 먼저 사용해야 peer-* 수정자를 사용할 수 있음



형제 구별

 

여러 피어를 사용할 때 peer/{name} 클래스를 사용하여 해당 피어에 고유한 이름을 지정하고 peer-checked/{name} 과 같은 클래스를 사용하여 수정자에 해당 이름을 포함함으로써 특정 피어의 상태에 대해 스타일을 지정할 수 있습니다.



임의 형제

 

대괄호 사이에 임의의 값으로 자체 선택지를 제공하여 즉시 일회성 peer-* 수정자를 만들 수 있습니다.

 

<form>
  <label for="email">Email:</label>
  <input id="email" name="email" type="email" class="is-dirty peer" required />
  <!-- 동료 요소가 is-dirty 클래스를 가지는 경우 이후 스타일 적용 -->
  <div class="peer-[.is-dirty]:peer-required:block hidden">This field is required.</div>
</form>



더 많은 제어를 위해 & 문자를 사용하여 전달하는 선택자와 관련하여 최종 선택기에서 .peer 이 끝나야 하는 위치를 표시할 수 있습니다.

 

<div>
  <input type="text" class="peer" />
  <div class="hidden peer-[:nth-of-type(3)_&]:block"><!-- ... --></div>
</div>



1.3 하위 스타일 지정 (*-{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>



※ 주의사항

 

생성된 하위 선택기의 특수성으로 인해 하위 자체에 직접 유틸리티를 사용하여 스타일을 재정의하는 것은 작동하지 않습니다.

 

<!-- ❌ 잘못된 방법 -->
<ul class="*:bg-sky-50 ...">
  <li class="bg-red-50 ...">Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
</ul>



1.4 자손을 기반으로 한 스타일 지정(has-{modifier})

 

has-* 수정자를 사용하면 해당 하위 요소의 상태나 콘텐츠를 기반으로 요소의 스타일을 지정할 수 있습니다.

 

<!-- label 요소의 하위요소 중 checked 요소를 가지고 있다면 이후 스타일 적용 -->
<label class="has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200 ..">
  <input type="radio" class="checked:border-indigo-500 ..." />
</label>



has-*를 has-[:focus]와 같은 의사 클래스와 함께 사용하면 하위 요소의 상태에 따라 요소의 스타일을 지정할 수 있습니다.

 

has-[img] 또는 has-[a] 와 같은 요소 선택기를 사용하여 하위 요소의 콘텐츠에 따라 요소의 스타일을 지정할 수도 있습니다.



1.5 그룹의 하위 항목을 기반으로 한 스타일 지정(group-has-{modifier})

 

상위 요소의 후손을 기반으로 요소의 스타일을 지정해야 하는 경우 상위 요소를 group 클래스로 표시하고 group-has-* 수정자를 사용하여 대상 요소의 스타일을 지정할 수 있습니다.

 

<div class="group ...">
  <img src="..." />
  <h4>Spencer Sharp</h4>
  <!-- 그룹이 a 태그를 가지고 있으면 block 옵션으로 노출됨 -->
  <svg class="hidden group-has-[a]:block ...">
    <!-- ... -->
  </svg>
  <p>Product Designer at <a href="...">planeteria.tech</a></p>
</div>



1.6 피어의 하위 항목을 기반으로 한 스타일 지정(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>
    <!-- 동료 요소의 하위 요소중에 checked 요소를 가지고 있으면 노출되지 않음 -->
    <svg class="peer-has-[:checked]:hidden ...">
      <!-- ... -->
    </svg>
  </div>

  <!-- ... -->
</fieldset>




2. 의사 요소 (Pseudo-elements)

 

Pseudo-elements: 선택한 요소의 특정 부분에 스타일을 지정할 수 있도록 선택기에 추가된 키워드

 

2.1 Before and after

 

::before, ::after: -> before:, after:

 

※ Tailwind는 기본적으로 content: '' 를 자동으로 추가하므로 다른 값을 원하지 않는 한 이를 지정할 필요가 없습니다.

 

<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700"> Email </span>




2.2 Placeholder text

 

::placeholder -> placeholder:

 

<label class="relative block">
  <span class="sr-only">Search</span>
  <input class="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm" placeholder="Search for anything..." type="text" name="search"/>
</label>




2.3 File input buttons

 

파일 입력의 버튼 스타일을 지정합니다.

 

file:

 

<label class="block">
  <span class="sr-only">Choose profile photo</span>
  <input type="file" class="block w-full text-sm text-slate-500
    file:mr-4 file:py-2 file:px-4
    file:rounded-full file:border-0
    file:text-sm file:font-semibold
    file:bg-violet-50 file:text-violet-700
    hover:file:bg-violet-100
  "/>
</label>



※ 파일 입력 버튼 스타일 주의사항 : 파일 입력 버튼에는 Tailwind의 기본 테두리 설정(기본 테두리 없음)이 적용되지 않습니다. 따라서 파일 입력 버튼에 테두리를 추가하려면 ​​file:border-solid와 같은 클래스를 사용하여 테두리 스타일을 명시적으로 설정해야 합니다.

 

<input  type="file"  class="file:border file:border-solid ..."  />




2.4 List markers

 

::marker -> marker:

 

※

  • 요소에서 직접 사용할 수 있지만 반복을 피하기 위해 상위 요소에서도 사용할 수 있습니다.

 

<ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-400">
  <li>5 cups chopped Porcini mushrooms</li>
  <li>1/2 cup of olive oil</li>
  <li>3lb of celery</li>
</ul>




 

참고

 

https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes
https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-elements

저작자표시

'Tailwind CSS' 카테고리의 다른 글

6. Tailwind CSS 커스텀 스타일과 관련 지시어 및 함수  (0) 2024.05.04
5. Tailwind CSS 다크모드 적용 사용자 정의 스타일  (0) 2024.04.30
4. Tailwind CSS 반응형 디자인  (0) 2024.04.29
2. Tailwind CSS 이해와 의의  (0) 2024.04.28
1. Tailwind CSS 개념 및 초기 설정  (0) 2024.04.25

관련글

티스토리툴바