하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자

선택자와 선택자를 연결해 적용 대상을 한정시키는 '연결 선택자(Combination Selector)'에 대해 알아 보겠습니다. 연결 선택자에는 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자가 있습니다.

2 min read

이번 포스팅에서는 선택자와 선택자를 연결해 적용 대상을 한정시키는 '연결 선택자'에 대해 알아 보겠습니다. 연결 선택자에는 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자가 있습니다.

하위 선택자 (Descendant Selector)

하위 선택자는 특정 요소의 하위에 있는 요소를 모두 선택합니다.

상위 요소와 하위 요소를 공백으로 구분합니다.

예를 들어

div blockquote

는 <div> 요소의 하위에 있는 <blockqoute> 요소를 선택합니다.

이때 <div> 요소와 <blockqoute> 요소 사이에 요소가 더 있어도 선택이 됩니다.

즉

<div>
  <blockquote> ... </blockquote>
</div>

일 때도 <blockqoute> 요소를 선택하고,

<div>
  <aside>
    <blockquote> ... </blockquote>
  </aside>
</div>

일 때도 <blockqoute> 요소를 선택합니다.

자식 선택자는 특정 요소의 자식 요소를 선택합니다.

부모 요소와 자식 요소를 >으로 구분합니다.

예를 들어

div > blockquote

는 <div> 요소의 자식 요소 중 <blockqoute> 요소를 선택합니다.

이때 주의할 점은 한 단계 아래에 있는 요소만 선택한다는 것입니다.

즉

<div>
  <blockquote> ... </blockquote>
</div>

일 때는 <blockqoute> 요소를 선택하지만

<div>
  <aside>
    <blockquote> ... </blockquote>
  </aside>
</div>

일 때는 <blockqoute> 요소를 선택하지 않습니다.

형제 선택자는 어떤 요소의 형제 요소를 선택하는 선택자입니다.

두 요소를 ~으로 구분합니다.

예를 들어

h1 ~ p

는 <h1> 요소의 형제 요소 중 <p> 요소를 선택합니다.

<div>
  <h1></h1>
  <p> ... </p>
  <ul>
    <li></li>
    <li></li>
  </ul>
  <p> ... </p>
</div>

인접 형제 선택자는 어떤 요소의 형제 요소 중 첫번째 요소를 선택합니다.

예를 들어

h1 + p

는 <h1> 요소의 형제 요소 중 첫번째 <p> 요소만 선택합니다.

<div>
  <h1></h1>
  <p> ... </p>
  <ul>
    <li></li>
    <li></li>
  </ul>
  <p> ... </p>
</div>