CSS3 - 상태 선택자

상태 선택자는 입력 양식의 상태를 선택할 때 사용하는 선택자입니다.

선택자 형태	설명
:checked	체크 상태의 input 태그를 선택
:focus	초점이 맞추어진 input 태그를 선택
:enabled	사용 가능한 input 태그를 선택
:disabled	사용 불가능한 input 태그를 선택

enabled는 input가 사용 가능한 상태를 말하고, disabled은 사용 불가능한 상태를 나타냅니다. 아래 예시1은 위의 표의 형태를 사용한 코드입니다. checkbox에 경우 체크를 할 경우 width는 100px, height가 100px만큼 크기가 커지는 것을 알 수 있습니다.

예시1

예시2

위의 예시2는 속성 선택자, 상태 선택자, 동위 선택자를 함께 사용해 만든 코드입니다. 코드를 실행하고 <input type="checkbox"의 체크된 상태에 따라 글자가 나타났다 사라졌다를 실행할 수 있는 것을 알 수 있습니다.