HTML 부모요소 vs 자식요소 , CSS 자손선택자 vs 자식 선택자

 

 

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

.box {
    border: 1px solid red;
    height: 400px;
    width: 400px;

   }

   .box div {
    border: 1px solid blue;
    height: 200px;
    width: 200px;
    padding: 20px;
   }

.box div { } 이렇게 넣어주게 되면 box클래스의 밑에 div 그 밑에 div 까지 선택되는 자손 선택자가 된다.

---

 

 .box > div {
    border: 1px solid blue;
    height: 200px;
    width: 200px;
    padding: 20px;
   }

box의 바로밑에 div를 선택하기 위해서는  " > " 모양으로 자식선택자를 선택 할 수 있다.

---

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

 .box > div div {
    border: 1px solid purple;
    height: 100px;
    width: 100px;

box 밑에 div 밑에 div 를 선택하기 위해서는 

.box > div 자식선택자 선택후 div { }를해주면 된다.