CSS만 사용하여 확인란 상태에 따라 레이블 스타일을 지정하려면 어떻게 해야 합니까?

JavaScript를 사용하지 않고 체크박스 상태를 기반으로 라벨 스타일 지정

웹 개발의 많은 시나리오에는 사용자 입력을 기반으로 정보를 표시하는 작업이 포함됩니다. 일반적인 예 중 하나는 해당 확인란을 선택하거나 선택 취소할 때 레이블의 모양을 전환하는 것입니다. JavaScript는 이를 달성하는 간단한 방법을 제공하지만 이 기사에서는 순수한 CSS 솔루션을 탐색합니다.

인접 형제 조합기

이 기술의 핵심은 인접 형제 조합기( )에 있습니다. 이 선택기를 사용하면 논리적 DOM 트리 내의 다른 요소에 인접하고 그 앞에 오는 요소를 대상으로 지정할 수 있습니다. 우리의 경우 체크박스 바로 뒤에 오는 라벨 요소를 타겟팅하려고 합니다.

다음 HTML 구조를 고려하세요.

<div>
  <input type="checkbox" class="check-with-label"><h3 id="라벨-스타일-지정">라벨 스타일 지정</h3>
<p>이제, 인접한 형제 결합자를 사용하면 이전 확인란이 다음과 같은 경우에만 레이블 요소를 대상으로 하는 CSS 규칙을 작성할 수 있습니다. 확인됨:</p>
<pre class="brush:php;toolbar:false">.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

이 규칙은 확인된 상태에 있는 "check-with-label" 클래스가 있는 모든 요소가 "check-for-check" 클래스 스타일이 있는 인접한 형제 요소를 갖게 됨을 나타냅니다. 굵은 글꼴 두께를 사용합니다.

예:

주어진 HTML 예제에 이러한 CSS 규칙 적용 결과는 다음과 같습니다.

<div>
  <input type="checkbox" class="check-with-label"><pre class="brush:php;toolbar:false">.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

출력:

My Label (bold)

이 경우 "내 라벨"은 굵게 표시됩니다. 앞의 확인란이 선택되어 있으면 이 순수 CSS 기술이 확인란 상태에 따라 라벨의 모양을 성공적으로 변경했음을 나타냅니다.