클래스 선택자
USS 클래스 선택자는 특정 USS 클래스가 할당된 요소와 매칭됩니다.USS 클래스 선택자는 CSS 클래스 선택자와 유사합니다.
구문
A class selector consists of the class name prefixed with a period. Class names can’t begin with a numeral.
.className { ...}
USS 파일에서 선택자를 작성할 때만 마침표를 사용하십시오.UXML 또는 C# 파일에서 요소에 클래스를 할당할 때는 포함하지 마십시오.예를 들어, <Button class=".yellow" />는 사용하지 마십시오.
일반적으로 클래스명에는 마침표를 넣지 마십시오.Unity의 USS 파서가 마침표를 새 클래스의 시작 부분으로 해석합니다.예를 들어 ‘yellow.button’이라는 클래스를 생성하고.Yellow.button{...}이라는 USS 규칙을 생성한다고 가정해 보겠습니다.파서는 선택자를 다중 선택자로 해석하고 ’.yellow클래스와 '.button 클래스 모두와 매칭되는 요소를 찾으려고 합니다.
요소에 두 개 이상의 클래스가 할당된 경우 선택자는 요소와 매칭되기 위해 이 중 하나와만 매칭되어야 합니다.
선택자에서 여러 클래스를 지정할 수도 있습니다. 이 경우 요소는 매칭을 위해 해당 클래스를 모두 할당해야 합니다.자세한 내용은 다중 선택자를 참조하십시오.
예제
다음 예시 UI 문서는 간단한 선택자로 요소를 일치시키는 방법을 보여줍니다.
<UXML xmlns="UnityEngine.UIElements">
<VisualElement name="container1">
<VisualElement name="container2" class="yellow">
<Button name="OK" class="yellow" text="OK" />
<Button name="Cancel" text="Cancel" />
</VisualElement>
</VisualElement>
</UXML>
스타일을 적용하지 않으면 UI는 다음과 같이 표시됩니다.
다음과 같은 이름 클래스 선택자 스타일 규칙은 container2 요소와 OK 버튼 요소를 매칭시키고 해당 요소의 배경을 노란색으로 변경합니다.
.yellow {
background-color: yellow;
}
스타일을 적용하면 UI는 다음과 같이 표시됩니다.
