반응형 헤더 네비게이션 강의 질문있습니다.

<div class="trigger">

<span></span>

<span></span>

<span></span>

</div>

----------------------------------------------------------

 .trigger.active span:nth-child(1) {

  top: 50%;

  transform: rotate(45deg);

}

.trigger.active span:nth-child(2) {

  opacity: 0;

}

.trigger.active span:nth-child(3) {

  top: 50%;

  transform: rotate(-45deg);

  }

}

안녕하세요~  반응형 헤더 네비게이션 강의 궁금한게 있는데요

위에 코드가 트리거 모바일  네비게이션 모양 만드는 코드인데

html에 trigger라는 div태그에 .active 라는 클래스명을 안주었는데

저렇게 css에 .trigger.active를 주셨던데 

html에 .active 클래스명을 안주었는데도 트리거를 눌렀을때 

메뉴가 왜 작동되는지 궁금합니다.