[HTML/CSS] Tailwind CSS에서 형제 셀렉터(~) 사용하기

Tailwind CSS 2.2 버전부터 peer-* variants로 형제 요소를 선택할 수 있다. input 요소에 peer 클래스를 정의해두면, 형제 요소에서 peer 클래스를 이용해 input 요소를 선택할 수 있다. 주로 peer-checked 처럼 요소의 특정 상태를 선택할 때 사용한다. peer-checked는 (체크박스 등)요소가 체크된 상태일 때 적용된다. 이외에도 다양한 가상 클래스 셀렉터를 사용할 수 있다. e.g. peer-hover peer-focus peer-disabled

<label>
  <input type="checkbox" class="peer sr-only" />
  <!-- input 요소(peer)가 체크된 상태면 span 요소의 배경색을 blue-500으로 변경 -->
  <span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500" />
  <!-- ... -->
</label>

 

참고로 위 peer-checked 클래스는 ~ 형제 셀렉터를 사용한 CSS 코드로 변환된다.

.peer:checked ~ .peer-checked\:bg-blue-500 {
  background-color: #3b82f6;
}

 

💡 ~ 형제 셀렉터는 인접한(같은 레벨) 형제 엘리먼트를 모두 선택한다.
e.g. section ~ p { } → section 요소 뒤에 인접한 형제 엘리먼트 p 모두 선택

 

레퍼런스

---

Tailwind CSS v2.2 - Tailwind CSS

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요