transform 3번째 강의 질문

Question

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

jaake975425 · Answer

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