~ 셀렉터
[HTML/CSS] Tailwind CSS에서 형제 셀렉터(~) 사용하기
[HTML/CSS] Tailwind CSS에서 형제 셀렉터(~) 사용하기
2024.05.11Tailwind CSS 2.2 버전부터 peer-* variants로 형제 요소를 선택할 수 있다. input 요소에 peer 클래스를 정의해두면, 형제 요소에서 peer 클래스를 이용해 input 요소를 선택할 수 있다. 주로 peer-checked 처럼 요소의 특정 상태를 선택할 때 사용한다. peer-checked는 (체크박스 등)요소가 체크된 상태일 때 적용된다. 이외에도 다양한 가상 클래스 셀렉터를 사용할 수 있다. e.g. peer-hover peer-focus peer-disabled 참고로 위 peer-checked 클래스는 ~ 형제 셀렉터를 사용한 CSS 코드로 변환된다..peer:checked ~ .peer-checked\:bg-blue-500 { background-c..