의사 클래스(Pseudo Classes)

CSS 의사 클래스(Pseudo Class)는 선택자에 추가되어 선택할 요소의 특정 상태를 지정하는 키워드입니다. 예를 들어, ":hover" 는 사용자가 선택자로 지정된 요소에 마우스를 올릴 때 스타일을 적용합니다.

의사 클래스는 요소가 문서 트리의 콘텐츠뿐만 아니라 요소가 포커스를 가졌는지(":focus") 또는 유효하지 않은 상태인지(":invalid")와 같은 외부 요인에 따라 스타일을 적용할 수 있기 때문에 양식에서 중요한 역할을 합니다.

표준 의사 클래스 중 일부는 특정 요소에만 적용되고 그 요소의 상위 요소에는 적용되지 않기 때문에 유용성이 제한될 수 있습니다. 예를 들어, 많은 Wijmo 입력 컨트롤에는 입력 요소가 포함되어 있습니다. 입력 요소가 포커스를 가질 때 내부 입력 요소는 ":focus" 의사 클래스를 갖게 되지만, 컨트롤을 포함하는 호스트 요소에는 적용되지 않습니다.

이러한 이유로, Wijmo는 더 효과적인 양식 구성을 위해 자체 의사 클래스를 추가했습니다:

• wj-state-focused: 컨트롤이 활성 요소를 포함하고 있을 때(반드시 호스트 요소가 활성 요소일 필요는 없음) 컨트롤 호스트 요소에 추가됩니다.

• wj-state-invalid: 컨트롤이 유효하지 않은 상태의 입력 요소를 포함하고 있을 때 컨트롤 호스트 요소에 추가됩니다.

• wj-state-empty: 컨트롤이 내용이 없는 입력 요소를 포함하고 있을 때 컨트롤 호스트 요소에 추가됩니다. (이는 자식 요소가 없는 요소에 적용되는 :empty 의사 클래스와는 다릅니다.)

• wj-state-readonly: 컨트롤의 isReadOnly 속성이 true로 설정되었을 때 컨트롤 호스트 요소에 추가됩니다.

• wj-state-disabled: 컨트롤의 isDisabled 속성이 true로 설정되었을 때 컨트롤 호스트 요소에 추가됩니다. (이는 컨트롤의 호스트 요소에 "disabled" 속성을 추가하는 것과 동일합니다.)

• wj-clear-input: Wijmo 입력 컨트롤의 입력 요소에 "Clear" 버튼을 추가하기 위해 컨트롤 호스트 요소에 추가됩니다. "Clear" 버튼은 사용자가 마우스를 사용하여 컨트롤을 지울 수 있게 하며, Ctrl+A/Delete 키를 누르는 것보다 더 편리할 수 있습니다.