transform 3번째 강의에서 10분 35초에 .box의 span 태그에 hover 가상선택자를 부여하는 건데 왜 .box:hover span와 같이 작성해야 하는 건지 궁금합니다! .box span:hover로 해봤을때 생각한대로 적용이 안되어서 저게 틀렸다는 건 알겠는데 왜 틀렸는지와 왜 .box:hover span와 같은 순서로 작성을 해야 하는 지 이해가 안갑니당

안녕하세요!<code>.box span:hover</code>은 <code>.box</code> 내부의 <code>span</code> 요소에 마우스 오버가 될 때 스타일을 적용합니다. 반면 <code>.box</code>에는 마우스 오버가되어도 <code>span</code> 요소에는 스타일이 적용되지 않습니다.하지만 <code>.box:hover span</code>은 <code>.box</code>에 마우스 오버가 될 때 내부의 모든 <code>span</code> 요소에 스타일을 적용합니다. 즉, <code>.box</code>와 그 내부의 <code>span</code> 요소 모두에 스타일이 적용됩니다. 스타일을 적용하는 범위의 차이라고 보시면 될 것 같습니다. hover가 되어 스타일이 적용될 대상이 span인지, box인지 구분되어야하기 때문에 순서가 중요하다 보시면 됩니다.감사합니다.😄

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

transform 3번째 강의 질문