Pseudo 클래스

CSS 가상 클래스는 선택된 요소의 특별한 상태를 지정하는 선택자에 추가 된 키워드입니다. 예를 들어, : hover는 사용자가 선택자에 의해 지정된 요소 위로 마우스를 가져갈 때 스타일을 적용합니다.

Pseudo(의사) 클래스는 문서 트리의 내용과 관련한 것 뿐만 아니라 요소에 포커스 (:focus)가 있는지 또는 유효하지 않은지 (:invalid)와 같은 외부 요소와 관련하여 스타일을 요소에 적용 할 수있게 해주기 때문에 양식에서 중요합니다.

표준 Pseudo(의사) 클래스 중 일부는 조상 요소가 아닌 특정 요소에만 적용되기 때문에 유용성이 제한적입니다. 예를 들어 많은 Wijmo 입력 컨트롤에는 입력 요소가 포함되어 있습니다. 입력 요소가 포커스를 가질 때, 내부 입력 요소는 :focus 가상 클래스를 얻지만 그것을 포함하는 컨트롤 호스트는 그렇지 않습니다.

이러한 이유로 Wijmo는 효과적인 형태를 쉽게 만들기 위해 Pseudo(의사) 클래스를 추가하였습니다.:

• wj-state-focused: 컨트롤에 활성 요소가 포함되어 있을 때 호스트 요소를 제어하기 위해 추가 되었습니다 (호스트 요소가 활성 요소 일때는 필수 요소는 아님). IE/Edge에서 사용할 수 없는 pesudo-selector(의사 선택기) 내의 standard focus(표준 포커스)와 동일 합니다.
• wj-state-invalid: 컨트롤에 입력 요소가 잘못된 상태로 포함되어 있으면 호스트 요소를 제어하기 위해 추가되었습니다.
• wj-state-empty: 컨트롤에 내용이 없는 입력 요소가 있는 경우 호스트 요소를 제어하기 위해 추가되었습니다. (이 요소는 하위 요소가 없는 요소에 적용되는 : empty 의사 클래스와는 다릅니다.)
• wj-state-readonly: 컨트롤의 isReadOnly 속성이 true로 설정된 경우 호스트 요소를 제어하기 위해 추가되었습니다.
• wj-state-disabled: 컨트롤의 isDisabled 속성이 true로 설정된 경우 호스트 요소를 제어하는 데 추가됩니다 (컨트롤의 호스트 요소에 "disabled" 특성 추가에 해당합니다).