CSS : nth-child 사용해보기 쉬움

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

박스에도 순서가 있다. 맨앞에 1 번 그다음부터 2.3.4 이렇게

 .box {
      border: 5px solid #000;
      text-align: center;
    }
    .box div {
      border: 2px solid black;
      margin:10px;
      width:200px;
      height: 200px;
      display: inline-block;
    
    }

    .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;
    }

 

이름이 없는 순서의 자식요소에 순서를 정해준다 이런 뜻.

.box div : nth-child(순서) {

실행할 내용

}

 

이렇게 지정해 주면사용이 가능하다.