CSS :checked 가상 클래스 선택자 사용 방법

`:checked` 가상 클래스

:checked 가상 클래스 선택자는
라디오 버튼(<input type="radio">)과 체크박스(<input type="checkbox">)가 체크된 상태일 때 해당 요소를 선택합니다.

라디오 버튼이나 체크박스의 상태 변화에 따라 스타일을 동적으로 변경하여 인터랙티브한 사용자 경험을 구현하는 데 활용됩니다.

일러두기
명세서에서는 라디오 버튼과 체크박스 이외에도, <select> 요소 내의 <option> 요소가 선택될 때 :checked 가상 클래스 선택자로 선택할 수 있다고 명시하고 있습니다.
하지만, 브라우저마다 스타일을 지정할 수 있는 범위가 매우 다르거나 아예 지원하지 않기 때문에 실제 개발 환경에서는 사용하기 어려우므로, 이 주제의 글에서는 제외하였습니다.
브라우저 호환성을 참고하세요.

예제

다음은 라디오 버튼(<input type="radio">)과 체크박스(<input type="checkbox">)가 체크된 상태일 때 해당 요소를 선택하는 예제입니다.

HTML

<form>
    <fieldset>
        <legend>흥미로운 주제 선택</legend>
        <input type="radio" name="favorite" id="html" checked>
        <label for="html">HTML</label>
        <br>
        <input type="radio" name="favorite" id="css">
        <label for="css">CSS</label>
    </fieldset>
    <fieldset>
        <legend>개인정보처리방침에 대한 동의</legend>
        <input type="checkbox" name="privacy" id="privacy" checked>
        <label for="privacy">네, 동의합니다.</label>
    </fieldset>
</form>

CSS

/* 체크된 input 요소를 선택 */
input:checked {
    border: none;
    outline: 3px solid red;
}

/* 체크된 input 요소를 선택해서
   바로 뒤에 있는 label 요소에 스타일을 지정 */
input:checked + label {
    background-color: yellowgreen;
    color: white;
}

:checked + label은
CSS 다음 형제 선택자 (+) – 요소 바로 뒤에 있는 타깃 형제 요소를 선택을 참조하세요.