CSS 결합자 (Combinators), 형제, 자식, 자손

Posted on by Damon

CSS 결합자(Combinators)는 두 개 이상의 선택자를 결합하여 특정 요소를 선택하는 데 사용됩니다. 간단한 예제를 통해 CSS 결합자에 대해 알아보도록 하겠습니다.

CSS 결합자 (Combinators)

참고로 MDN은 결합자(combinator)로 표기하고 w3schools은 선택자(selector)로 표기하고 있습니다.

  1. 인접 형제 결합자 (+)
  2. 일반 형제 결합자(~)
  3. 자식 결합자 (>)
  4. 자손 결합자 (space)

인접 형제(+) (adjacent sibling combinator)

인접 형제 결합자는 (+)로 표시하며 앞에서 지정한 요소의 바로 다음(첫 번째)에 위치하는 형제 요소만 선택합니다.

예제 :

div + p {
  background-color: yellow;
}
<p>문단</p>

<div>
  <p>문단1 (div 자식 요소)</p>
  <p>문단2 (div 자식 요소)</p>
</div>

<p>문단3 (div 다음에 위치한 형제 요소)</p><!-- 선택 -->
<p>문단4 (div 다음 다음에 위치한 형제 요소)</p>

<div>
  <p>문단5 (div 자식 요소)</p><!-- 선택 -->
  <p>문단6 (div 자식 요소)</p>
</div>

<p>문단7 (div 다음에 위치한 형제 요소)</p>
<p>문단8 (div 다음 다음에 위치한 형제 요소)</p>

w3schools 예제를 참고해 보세요

일반 형제(~)

일반 형제 결합자는 (~)로 표시하며 앞에서 지정한 요소 다음에 오는 형제 요소를 선택합니다.

예제 :

div ~ p {
  background-color: yellow;
}
<p>문단</p>

<div>
  <p>문단1</p>
</div>

<p>문단1</p><!-- 선택 -->
<code>Some code.</code>
<p>문단1</p><!-- 선택 -->

w3schools 예제

자식(>)

자식 결합자는 (>)로 표시하며 앞에서 지정한 요소 안에 위치한 자식 요소만을 선택합니다.

div > p {
  background-color: yellow;
}
<div>
  <p>div의 자식</p>
  <p>div의 자식</p>
  <section>
    <p>div의 자손</p>
  </section>
  <p>div의 자식</p>
</div>

w3schools 예제

자손(space)

자손 결합자는 공백(space)으로 표시하며 공백 다음에 위치한 모든 요소를 선택합니다.

예제:

div p {
  background-color: yellow;
}
<p>문단</p>

<div>
  <p>문단1 자식</p><!-- 선택 -->
  <p>문단2 자식</p><!-- 선택 -->
  <section><p>문단3 자손</p><!-- 선택 --></section>
</div>

<p>문단4</p>

w3schools 예제

간단한 예제를 통해 CSS 결합자를 알아보았습니다. 각 예제 아래에 w3schools 예제 링크가 있으니 참고해 보시기 바랍니다.

logo
아이티 이알