Combinator ( aka 복합 선택자, 연결자 혹은 결합자 )

CSS Combinator는 복합 선택자, 연결자, 결합자 등의 다양한 한글 표기가 존재합니다. 이 교안에서는 혼란을 줄이기 위해 Combinator의 우리말 표현인 콤비네이터로 통일해 사용하도록 하겠습니다.

/* 선택자 */
header a {
	display: inline-block;
 /* 속성 */   /* 값 */
}

▲ header에 포함되어 있는 a의 display를 inline-block으로 설정

선택자와 선택자를 결합해서 사용하는 선택자를 ‘**콤비네이터’**라고 합니다. 콤비네이터에도 여러 가지 종류가 있어 이에 대해서 알아보겠습니다.

1. 자손(Descendant) 콤비네이터

하위 선택자는 선택자 사이를 공백을 사용하여 나타냅니다. 앞 요소의 자손인 뒤 요소를 선택합니다.

이 태그는 section 아래 있는 모든 ul태그를 가리키기 때문에 바로 아래 자식을 선택할 때에는 자식 콤비네이터를 사용해주세요.

section ul {
    text-shadow: none;
}

2. 자식(Child) 콤비네이터

하위 선택자는 선택자 사이를 > 를 사용하여 나타냅니다. 앞 요소의 자식 인 뒤 요소를 선택합니다.

section > ul {
    text-shadow: none;
}

자손은 자식 을 포괄하는 의미입니다. 자손은 모든 하위 요소를 의미하고 자식은 바로 아래의 하위 요소에만 적용합니다.

• .foo > p : class="foo"인 엘리먼트의 직계 자식 엘리먼트 중 p를 선택.

  .foo > p 설명 예시 code

  <section class="foo">
  	<header>
  		<h1>집에서 맛있는 피자 만들기</h1>
  		<p>주위에서 쉽게 구할 수 있는 재료를 중심으로</p>
  	</header>
  	<p>AAAAA</p>
  </section>