css 선택자의 다양한 선택자를 알아보자1 :nth-child, :nth-of-type 사용 방법과 class와 같이 사용할 때의 유의점

 

다른 사람들이 사용하는 코드를 보면 다양한 선택자를 적재적소에 잘 사용하는 사람들이 있습니다. 그때마다 많이 배우게 되는것 같습니다. 이번 포스팅에서는 제가 자주 사용하지 않았었지만 다른 사람들의 코드를 보고 이렇게 사용할 수 있는 코드들이 많아서 차근차근 찾아보며 선택자에 대해서 공부를 해보려고 합니다. 

css 선택자 :nth-child와 nth-of-type 차이점

:nth-child 와 :nth-of-type의 차이는?

 

* 'nth-child'는 부모 안에 '모든 자식요소'들을 의미합니다. 따라서 부모 밑에 있는 '모든 자식들'이 범위이며 이 중 몇번째를 선택하고 싶은지 생각하시면 됩니다.

* 'nth-of-type'은 부모 안에 있는 자식들중 선택하고싶은 '선택한 특정 태그를 가진 자식들'이 범위입니다. 예를 들어 'p:nth-of-tye(2)'를 선택했다면 부모 안에 있는 '모든 p태그 자식들 중' 두번째 p태그가 선택될 것입니다. 

<div class="parent">
    <p>I'am p</p>
    <span>I'am span</span>
    <p>I'am p</p>
    <div>I'am div</div>
</div>

*class를 사용할 때에는 class명이 같아야 합니다.

위와 같은 예시로 태그명을 사용해서 코딩을 한 예시는 어렵지 않지만 제가 항상 작업을 하면서 헷갈렸던 부분은 이 부분입니다. 'nth-of-type'이 자식들 중 특정 태그를 선택해 준다는 설명은 이해가 가는데 어떨 때에는 동작을 하고 어떨때에는 동작을 하지 않습니다. 그래서 포스팅을 하면서 공부할 겸 이런 저런 테스트를 해보았습니다. 결론적으로 같은 div태그 더라도 'class'가 다르면 작동하지 않습니다. 

 

<div class="parent">
    <p>I'am p</p>
    <span>I'am span</span>
    <p>I'am p</p>
    <div>I'am div</div>
</div>
 
<div class="parent">
    <p>I'am p</p>
    <span>I'am span</span>
    <p>I'am p</p>
    <div>I'am div</div>
</div>
 
<div class="test">
    <p>I'am p</p>
    <span>I'am span</span>
    <p>I'am p</p>
    <div>I'am div</div>
</div>
 
<div class="parent">
    <p>I'am p</p>
    <span>I'am span</span>
    <p>I'am p</p>
    <div>I'am div</div>
</div>

div {
    float: left;
 
    span:nth-child(2) {
        color: red;
    }
 
    p:nth-of-type(2) {
        color: blue;
    }
}
 
.parent {
    &:nth-of-type(2) {
        backround-color: yellow;
    }
}

---

.parent {
    &:nth-of-type(3) {
        backround-color: yellow;
    }
}

저는 사스로 주로 작업을 하는데 완전히 정리 되지 않은 상황에서 작업을 하다보니 작업량이 많을 때에는 뇌가 더이상 굴러가지 않아 왜 안되지 싶으면 돌아가면서 써보면서 언제 한번 정리해야지.. 이런 마음을 계속 가지고 있었던것 같습니다. 이렇게 정리를 한번 하고 나면 작업할 때에도 자신감이 더 붙는것 같습니다. 저와 같이 헷갈리셨던 분들이 있으셨다면 도움이 되셨길 바랍니다.