1. 결합 선택자(selector)

---

• 결합 선택자는 연관된 선택자들 간의 관계를 설정한다.

1) 자식 선택자(child selector)

• 자식 선택자는 부모 요소의 바로 아래 자식 요소만 선택한다.

기본 문법

div > p {
    /*  속성 */
}

<p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>
<div>
  <p>div 태그 바로 밑에 존재하는 p 태그만 선택됩니다!</p>
  <p>div 태그 바로 밑에 존재하는 p 태그만 선택됩니다!</p>
  <span>
    <p>이 p 태그는 span 태그로 둘러 쌓여 있습니다.<br>
      따라서 div 태그 바로 밑에 존재하는 p 태그가 아니므로 선택되지 않습니다!
    </p>
  </span>
</div>
<p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>

div {
    border: 3px solid #CD853F;
}

div > p {
    background-color: #FFEFD5;
}

2) 자손 선택자(descendant selector)

• 자손 선택자는 부모 요소에 포함된 모든 하위 요소를 선택한다.

• 자손 선택자는 선택자 사이에 한 칸의 띄어쓰기를 반드시 명시해야 한다.

기본 문법

div p {
    /* 속성 */
}

<p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>
<div>
  <p>div 태그 내부의 p 태그만 선택됩니다!</p>
  <p>div 태그 내부의 p 태그만 선택됩니다!</p>
  <p>div 태그 내부의 p 태그만 선택됩니다!</p>
</div>
<p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>

div {
    border: 3px solid #CD853F;
}

div p {
    background-color: #FFEFD5;
}