작성
·
165
1
답변 1
2
<div class="box">
<span class="box1"></span>
<span class="box2"></span>
</div>
질문글에 적어주신 것 처럼 .box span:nth-child(2)나 .box2나 결국 똑같은 것을 지칭하는 것이 맞습니다. 뭔가 잘 안되신다면 다른 문제인 듯 합니다.
현재 html에서 span .box1, .box2라고 클래스 네임을 주는건 좋은 html 코딩은 아닙니다. 좋은 CSS는 클래스네임 사용을 최소화하면서 html 엘리먼트를 선택하는 것이기 때문에 아래처럼 html 깨끗하게 만들고 CSS 선택하는 것이 좋습니다.
<div class="box">
<span></span>
<span></span>
</div>
.box span:nth-child(1) {...}
.box span:nth-child(2) {...}
.box1 {...}
.box2 {...}
위의 2가지 선택자 방식은 동일하게 작동합니다. 다만 위에 있는건 html에 클래스 네임을 따로 주시 않은 방식이라 좀 더 간결한 코딩이 됩니다.
혹시 안되시면 html, css 코드를 모두 올려주세요.
친절한 답변 정말 감사합니다! :)