가상 클래스 checked

가상 클래스 checked는 선택된 체크박스 또는 라디오 버튼을 타겟팅할 수 있습니다.

아쉽게도, 이들 자체를 꾸미는 스타일은 지정할 수 없습니다. 예를 들어 배경 이나 테두리 색상을 지정할 수 없습니다 (너비와 높이 같은 속성은 지정할 수 있지만, 기대하는 것과 같은 효과를 주지는 않습니다).

그럼에도 불구하고, 인접 요소에 대한 스타일은 지정할 수 있습니다. 예를 들어, input:checked + p - 선택된 입력(input) 요소 바로 다음에 오는 단락의 스타일을 지정할 수 있습니다.

문법

요소:checked {
	
}

예제

체크박스를 선택(체크)하면, 선택된 체크박스 바로 다음에 있는 label 태그(레이블)가 빨간색으로 변하는 것을 볼 수 있습니다:

<input type="checkbox" id="elem1">
<label for="elem1">레이블 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">레이블 2</label>

input:checked + label {
	color: red;
}

예제

라디오 버튼을 선택하면, 선택된 라디오 버튼 바로 다음에 있는 label 태그(레이블)가 빨간색으로 변하는 것을 볼 수 있습니다:

<input type="radio" name="elem" id="elem1">
<label for="elem1">레이블 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">레이블 2</label>

input:checked + label {
	color: red;
}