nth-chlid로 태그를 지정할 때와 클래스명으로 지정할 때의 차이

Question

# HTML 문서 < body > < div class = "box" > < span class = "box1" > < span class = "box2" > # CSS 문서 .box2 { animation-delay : 0.5s ; } 영상에서 제시해주신 것처럼 span에 클래스명을 붙이지 않고 한 것이 아니라 각각의 span 태그에 클래스명을 붙이고 해봤습니다. 그런데 .box span:nth-child(2){ animation-delay: 0.5s;} 라고 하면 영상과 똑같은 결과가 나오는데 .box2 {animation-delay: 0.5s;}를 사용하면 박스가 계속해서 하나만 움직입니다. .box span:nth-child(2)나 .box2나 결국 똑같은 것을 지칭하는 것 아닌가요? 왜 하나는 정상적으로 박스 2개가 움직이고 하나는 박스 1개만 움직일까요 ㅠㅠ

코딩웍스(Coding Works) · Answer

질문글에 적어주신 것 처럼 .box span:nth-child(2)나 .box2나 결국 똑같은 것을 지칭하는 것이 맞습니다. 뭔가 잘 안되신다면 다른 문제인 듯 합니다. 현재 html에서 span .box1, .box2라고 클래스 네임을 주는건 좋은 html 코딩은 아닙니다. 좋은 CSS는 클래스네임 사용을 최소화하면서 html 엘리먼트를 선택하는 것이기 때문에 아래처럼 html 깨끗하게 만들고 CSS 선택하는 것이 좋습니다.

.box span:nth-child(1) {...} .box span:nth-child(2) {...} .box1 {...} .box2 {...} 위의 2가지 선택자 방식은 동일하게 작동합니다. 다만 위에 있는건 html에 클래스 네임을 따로 주시 않은 방식이라 좀 더 간결한 코딩이 됩니다. 혹시 안되시면 html, css 코드를 모두 올려주세요.