CSS 입문 | CSS 선택자 | 상태 의사 클래스

요소 상태 의사 클래스(element states pseudo-class)

소 상태 의사 클래스를 사용하면 입력 양식의 상태에 따라 각각의 스타일을 별도로 설정할 수 있다.

CSS에서 사용할 수 있는 요소 상태의사 클래스는 다음과 같다.

:checked

:checked는 input 요소 중에서 체크된(checked) 상태의 input 요소를 선택한다.

<style>
    input { color: #FFEFD5; }
    input:checked + span { color: #CD853F; }
</style>

:enabled와 :disabled

:enabled는 input 요소 중에서 사용할 수 있는 input 요소를 선택한다.
또한, :disabled는 input 요소 중에서 사용할 수 없는 input 요소를 선택한다.

<style>
    input { color: #FFEFD5; }
    input:disabled + span { color: #CD853F; }
</style>