right nav에 active 질문입니다

 <!--오른쪽 네비-->
                    <ul class="rightNav" id="rightNav">
                        <li data-menuanchor="firstPage" class="active"><a href="#firstPage"><span>홈</span></a></li>
                        <li data-menuanchor="secondPage"><a href="#secondPage"><span>브랜드</span></a></li>
                        <li data-menuanchor="thirdPage"><a href="#thirdPage"><span>메뉴</span></a></li>
                        <li data-menuanchor="fourthPage"><a href="#fourthPage"><span>서비스</span></a></li>
                        <li data-menuanchor="fifthPage"><a href="#fifthPage"><span>사회공헌</span></a></li>
                        <li data-menuanchor="sixthPage"><a href="#sixthPage"><span>SNS</span></a></li>
                        <li data-menuanchor="seventhPage"><a href="#seventhPage"><span>커뮤니티</span></a></li>
                    </ul>

css

/* rightNav motion*/

.fullPageWrap .rightNav li.active a span{opacity: 1;right: 30px; transition: all 0.5s ease-in-out;}
.fullPageWrap .rightNav li.active a:after{right:-2px; width: 12px; height: 12px; border: 2px solid #96cc29; border-radius: 12px; background: rgba(255,255,255,0);box-sizing: border-box;margin-top: -6px;}

html에 active가 첫 firstpage에만 붙어있는데 어떻게 다른 secondpage,thirdpage... 에도 적용이 되는지 궁금합니다! fullpage.js 에 붙어있는 기능인지 , 아니면 :active를 붙여서 사용된건지 자세하게 알고싶습니다!