인프런 커뮤니티 질문&답변

[질문 템플릿]
1. 강의 내용과 관련된 질문인가요? (예/아니오) 예
2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예
3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예

[질문 내용]
CSS <style> 태그의 클래스이름과

body에서 input 태그의 클래스 이름 설정이 다른데 어떻게 적용이 되는지 궁금합니다.

<style>
    .container {
        max-width: 560px;
    }
    .field-error{ // 이 부분
        border-color: #dc3545;
        color:  #dc3545;
    }
</style>

<div>
    <label for="itemName" th:text="#{label.item.itemName}">상품명</label>
    <input type="text" id="itemName" th:field="*{itemName}"
           th:class="${errors?.containsKey('itemName')} ? 'form-control field-error' : 'form-control'"
           class="form-control" placeholder="이름을 입력하세요">
    <div class="field-error" th:if="${errors?.containsKey('itemName')}" th:text="${errors['itemName']}">
        상품명 오류
    </div>
</div>

아래 코드를 보면 오류 발생시

클래스 이름을 'form-control field-error'로 설정했는데

css를 보면 .field-error 으로 클래스 이름을 찾아서 적용하는데 어떻게 이렇게 되는지 궁금합니다.