CSS : nth-child 와 nth-of-type 을 구별해서 사용하기

nth-child 를 주어 순서를 주었을때 모습이다.

 <div class="box">
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>

.box div:nth-child(1){
      background-color: blue;
    }
    .box div:nth-child(2){
      background-color: red;
    }
    .box div:nth-child(3){
      background-color: white;
    }

    .box div:nth-child(4){
        background-color: gold;
    }

---

nth-child를 해줘서 순서를 정해준 후 맞췄는데 만약 내가 h1 태그를 하나 더 추가한다고 하면?

<div class="box">
  <h1> 추가했어요 </h1>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>

 

이렇게 순서가 변하면서 색상도 변해버린다.

 

그럼 어떻게 해야할까

---

 

nth-of -type  : 태그를 구별한다.

 

   .box div:nth-of-type(1){
      background-color: blue;
    }
    .box div:nth-of-type(2){
      background-color: red;
    }
    .box div:nth-of-type(3){
      background-color: white;
    }

    .box div:nth-of-type(4){
        background-color: gold;
    }

앞서 h1 태그와 div 태그를 주었는데 나는 div태그를 지정해서 준거니까 태그를 구별해서 

h1에는 해당되지 않으니 div태그에 순서대로 색상이 주어진 것이다.