연결 선택자

• 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정
• 조합 선택자, 콤비네이션 선택자, 콤비네이션 셀렉터 라고도 함

하위 선택자(descendant selector)

• 하위 요소에 스타일을 적용
• 자손 선택자라고도 함

<!-- 하위 선택자를 사용하여 글자색 적용 -->
<style>
  body {
    background-color:#eee;
  }
  section {
    width:600px;
    margin:20px auto;
  }
  p {
    width:500px;
    padding:10px;
    background-color:#fff;
    border:1px solid #ccc;
    line-height:2;
  }

  /* Do it! section 요소의 모든 하위 p 요소의 스타일 바꾸기 */
 section p {  
    color:blue;   /* 글자색을 파란색으로 */
  }
</style>
...
<section>
  <h1>예약 방법 & 사용 요금</h1>
  <p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
  <div>
    <p>가족실(2~4인) : 60,000원/일</p>
    <p>도미토리(4인 공용) : 25,000원/일</p>
</section>  

자식 선택자(child selector)

• 자식 요소에만 스타일을 적용
• ‘>’ 기호를 표시해 부모 요소와 자식 요소 구분

<!-- 자식 선택자를 사용하여 글자색 적용 -->
<style>
  body {
    background-color:#eee;
  }
  section {
    width:600px;
    margin:20px auto;
  }
  p {
    width:500px;
    padding:10px;
    background-color:#fff;
    border:1px solid #ccc;
    line-height:2;
  }

  /* Do it! section 요소의 자식 p 요소의 스타일 바꾸기 */
  section > p {  /* section 요소의 자식 p 요소에 적용 */
    color:blue;  /* 글자색을 파란색으로 */
  }
</style>
...
<section>
  <h1>예약 방법 & 사용 요금</h1>
  <p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
  <div>
    <p>가족실(2~4인) : 60,000원/일</p>
    <p>도미토리(4인 공용) : 25,000원/일</p>
</section>   

인접 형제 선택자(adjacent selector)

• 형제 요소 중 첫 번째 동생 요소만 선택하는 것
• 요소1과 요소2 사이에 ‘+’ 기호를 표시

<!-- 인접 형제 요소에 스타일 적용 -->
<style>
  body {
    background-color:#eee;
  } 
  section {
    width:600px;
    margin:20px auto;
  }
  p {
    width:500px;
    padding:10px;
    background-color:#fff;
    border:1px solid #ccc;
    line-height:2;
  }

  /* Do it!  h1 요소의 형제 요소 중 첫번째 p 요소의 스타일 바꾸기 */
  h1 + p {  
    background-color:#222;  /* 배경은 검은색으로 */
    color:#fff;  /* 글자는 흰색으로 */
  }
</style>
...
<section>
  <h1>예약 방법 & 이용 요금</h1>
  <p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
  <p>가족실(2~4인) : 60,000원/일</p>
  <p>도미토리(4인 공용) : 25,000원/일</p>
</section>