[CSS] 10-1. 연결 선택자

10-1. 연결 선택자

연결 선택자는 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정합니다.

하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자

---

현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 합니다.

하위 선택자

하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 합니다. 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분합니다.

상위요소 하위요소 {스타일 규칙...}

👍 예시

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

자식 선택자

자식 선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자입니다.

부모요소 > 자식요소 {스타일 규칙...}

👍 예시

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

형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자

---

웹 문서에서 부모 요소가 같을 경우 형제 관계라고 하고, 형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 합니다.

인접 형제 선택자

형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 인접 형제 선택자라고 합니다.

형요소 + 동생요소 {스타일 규칙...}

👍 예시

...
	h1 + p {
    background-color: #222;
    color: #fff
}
</style>
...

    <h1>예약 방법 & 이용 요금</h1>
    <p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
    <p>가족실(2~4인) : 60,000원/일</p>
    <p>도미토리(4인 공용) : 25,000원/일</p>

형제 선택자

형제 선택자는 모든 형제 요소의 스타일에 적용됩니다. 인접 형제 선택자와 달리 앞에 반드시 형요소가 와야 하는 것은 아닙니다.

요소1 ~ 요소2 {스타일 규칙...}

👍 예시

...
	h1 ~ p {
    background-color: #222;
    color: #fff
}
</style>
...

    <h1>예약 방법 & 이용 요금</h1>
    <p>아직 온라인 예약 신청이 준비되어 있지 않습니다. <br>전화(xxx-xxxx-xxxx)로 문의 바랍니다.</p>
    <p>가족실(2~4인) : 60,000원/일</p>
    <p>도미토리(4인 공용) : 25,000원/일</p>

정리

---

• 하위 요소에 스타일을 적용하는 선택자에는 하위 선택자와 자식 선택자가 있습니다.
  • 하위 선택자는 두 요소 사이에 ‘ ‘ (공백)을 사용하며, 상위 요소의 모든 하위 요소들에 적용됩니다.
  • 자식 선택자는 두 요소 사이에 ‘>’ 를 사용하며, 상위 요소의 자식 요소에만 적용됩니다.
• 형제 요소에 스타일을 적용하는 선택자에는 인접 형제 선택자와 형제 선택자가 있습니다.
  • 인접 형제 선택자는 두 요소 사이에 ‘+’ 를 사용하며, 첫번째 동생 요소에만 적용됩니다.
  • 형제 선택자는 두 요소 사이에 ‘~’를 사용하며, 모든 형제 요소에 적용됩니다.