유사 클래스
유사 클래스는 특정 상태로 전환하는 요소와만 매칭되도록 선택자의 범위를 좁힙니다.
유사 클래스를 단순 선택자에 추가하여 특정 요소가 특정 상태일 때 일치시킵니다. 예를 들어 다음 USS 규칙은 사용자가 포인터를 위에 올려 놓을 때 :hover 유사 클래스를 사용하여 Button 요소의 컬러를 변경합니다.
Button:hover {
background-color: palegreen;
}
지원되는 유사 클래스
다음 표에는 지원되는 유사 클래스가 나열되어 있습니다. 유사 클래스를 확장하거나 커스텀 클래스를 생성할 수 없습니다.
| 유사 클래스 | 요소와 일치시키는 경우 |
|---|---|
:hover |
커서가 요소 위에 위치합니다. |
:active |
사용자가 요소와 상호 작용합니다. |
:inactive |
사용자가 요소와 상호 작용하기 위해 멈춥니다. |
:focus |
요소에 포커스가 있습니다. |
:selected |
USS는 이 유사 상태를 지원하지 않습니다. 대신 :checked를 사용합니다. |
:disabled |
요소가 비활성화 상태입니다. |
:enabled |
요소가 활성화 상태입니다. |
:checked |
요소가 토글 또는 라디오 버튼 요소이며 선택되어 있습니다. |
:root |
요소는 스타일시트가 적용된 시각적 트리의 최고 수준 요소입니다. |
유사 클래스 체이닝
유사 클래스를 서로 연결하여 여러 동시 상태에 동일한 스타일을 적용할 수 있습니다. 예를 들어 다음 USS 규칙은 사용자가 포인터를 위에 올려 놓을 때 선택한 Toggle 요소의 컬러를 변경하기 위해 :checked 및 :hover 유사 클래스를 함께 연결합니다.
Toggle:checked:hover {
background-color: yellow;
}
토글이 체크 표시되었지만, 포인터를 위에 올려 놓지 않으면 선택자가 더 이상 매칭되지 않습니다.
루트 유사 클래스
:root 유사 클래스는 스타일시트가 적용된 최상위 요소와 매칭됩니다.
루트 유사 클래스를 사용하여 기본값 설정
:root 유사 클래스를 사용하여 요소 간에 상속된 스타일에 대한 기본 스타일 값을 설정할 수 있습니다. 상속되는 USS 프로퍼티를 확인하려면 USS 프로퍼티 레퍼런스를 참조하십시오.
예를 들어 다음 USS 규칙은 기본 폰트를 설정합니다. 스타일시트를 시각적 트리의 루트 요소에 적용하면 더 특정한 스타일 규칙에서 폰트를 가져오지 않는 요소는 해당 폰트를 사용합니다.
:root {
-unity-font: url("../Resources/fonts/OpenSans-Regular.ttf");
}
루트 유사 클래스와 함께 커스텀 프로퍼티 사용
:root 유사 클래스의 일반적인 용도는 다른 스타일 규칙이 특정 값 대신에 사용할 수 있는 ‘전역’ 변수(커스텀 프로퍼티)를 선언하는 것입니다. 예를 들어 컬러에 대한 커스텀 프로퍼티를 정의하고 다른 규칙에서 사용할 수 있습니다.
:root {
--my-color: #ff0000;
}
Button {
background-color: var(--my-color);
}
루트 유사 클래스 매칭
CSS에서 :root 유사 클래스는 루트 요소인 <HTML>과 매칭됩니다. USS에서 이는 루트 요소 또는 시각적 트리의 다른 요소일 수 있습니다. 다른 요소나 해당 요소의 자식 요소와 매칭되지 않습니다.
예를 들어 다음의 계층 구조가 있는 경우:
var myElement = new VisualElement();
var myElementChild = new VisualElement();
myElement.Add(myElementChild);
var myOtherElement = new VisualElement();
스타일시트를 myElement에 추가하는 경우:
myElement.stylesheets.Add(myStyleSheet);
:root 선택자는 myElement와 매칭되지만 myElementChild 및 myOtherElement는 매칭되지 않습니다.
스타일시트를 myElementChild 및 myOtherElement에 명시적으로 추가하는 경우:
myElementChild.stylesheets.Add(myStyleSheet);
myOtherElement.stylesheets.Add(myStyleSheet);
이 경우, :root 선택자는 myElement, myElementChild, myOtherElement와 매칭됩니다.