하위·자식·형제 선택자

하위 · 자식 · 형제 선택자는 선택자 둘을 빈칸 · > · +로 이어, 요소 나무에서 어디에 있는 요소인지로 고릅니다. 선택자 사이에 오는 이 셋을 결합자(combinator)라고 부릅니다.

같은 h2라도 카드 안 제목만 따로 꾸미고 싶을 때가 있습니다. 요소마다 클래스를 붙이는 대신 '카드 안의 h2'처럼 나무 속 자리로 고르면 됩니다. 결합자 하나, 빈칸 하나로 고르는 요소가 달라지니 나무를 따라가며 읽는 법을 익힙니다.

<li class="recipe-card">  <div class="recipe-card-head">    <h2>떡볶이</h2>  </div>  <p>조리 20분</p></li>

1빈칸 — 몇 겹 안이든(하위 선택자)

선택자 둘을 빈칸으로 이으면 '앞 요소 안에 든 뒤 요소'를 고릅니다. 레시피 카드 하나를 보겠습니다.

<li class="recipe-card">
  <div class="recipe-card-head">
    <h2>떡볶이</h2>
  </div>
  <p>조리 20분</p>
</li>

.recipe-card h2 {
  color: #005bb5;
}

h2는 .recipe-card의 바로 안이 아니라 그 안 div의 안, 곧 두 겹 안입니다. 빈칸은 겹 수를 따지지 않아 이 h2를 고릅니다.

몇 겹 안이든 안에 든 요소를 후손, 바깥쪽 요소를 조상이라고 부릅니다. 바로 한 겹 안이 자식, 바로 한 겹 바깥이 부모이고, 자식의 자식(두 겹 안)은 손자입니다. 빈칸으로 후손을 고르는 선택자를 하위 선택자(자료에 따라 자손 선택자)라고 부릅니다.

결합자는 파일의 글자가 아니라 브라우저가 지은 요소 나무를 따라갑니다(브라우저 규칙 2). 그래서 무엇을 고를지 헷갈리면 Elements 패널의 나무를 봅니다. 할 일 화면의 .done .text도 하위 선택자입니다 — 끝낸 줄(.done) 안의 글(.text)을 고릅니다.

2> — 바로 한 겹 안(자식 선택자)

> 결합자로 이으면 바로 한 겹 안, 곧 자식만 고릅니다. 1절 카드에서 자식은 div와 p 둘입니다.

<li class="recipe-card">
  <div class="recipe-card-head">
    <h2>떡볶이</h2>
  </div>
  <p>조리 20분</p>
</li>

.recipe-card > p {
  color: #6e6e73;
}

카드 바로 안의 p는 고릅니다. div 안에 든 h2는 손자라 .recipe-card > h2로는 고르지 못합니다. 그 규칙은 오류 없이 아무 데도 닿지 않습니다(브라우저 규칙 4).

3+ — 바로 뒤 형제 하나(형제 선택자)

같은 부모를 둔 요소끼리 형제입니다. + 결합자로 이은 A + B는 A 바로 다음에 오는 형제 B 하나를 고릅니다. 자료에 따라 인접 형제 선택자라고 부릅니다(뒤의 형제를 모두 고르는 ~는 이 과목에서 쓰지 않습니다).

<li class="recipe-card">
  <img
    src="images/tteokbokki.svg"
    alt=""
    width="200"
    height="150"
  />
  <div class="recipe-card-head">
    <h2>떡볶이</h2>
  </div>
  <p>조리 20분</p>
</li>

img + p {
  color: #005bb5;
}

div + p {
  color: #6e6e73;
}

img와 p는 형제이지만 사이에 제목 묶음 div가 있습니다. img 바로 뒤는 div라 img + p는 아무것도 고르지 않고, div + p가 p를 고릅니다. 화면에서 그림 아래에 시간이 보여도, 나무에서 바로 뒤 형제가 아니면 고르지 않습니다. 카드 그림의 alt=""는 카드 제목이 같은 이름을 이미 말하기 때문입니다.

예제

오른쪽부터 짚기 — 결합자를 따라 왼쪽으로

결합자가 든 선택자는 오른쪽 끝부터 읽으면 쉽습니다. 레시피 페이지의 본문입니다.

<main>
  <h1>김치볶음밥</h1>
  <section>
    <h2>재료</h2>
    <p>밥 2공기</p>
  </section>
  <p>15분이면 됩니다.</p>
</main>

main > p {
  color: #6e6e73;
}

section p {
  color: #005bb5;
}

main > p를 읽는 차례입니다.

1. 오른쪽 끝 p가 고를 후보를 나무에서 모두 짚습니다 — '밥 2공기'와 '15분이면 됩니다.' 둘입니다.
2. 결합자를 따라 왼쪽으로 갑니다. >이니 후보마다 부모가 main인지 봅니다. '밥 2공기'의 부모는 section이라 빠집니다.
3. 남은 '15분이면 됩니다.'가 고른 요소입니다.

같은 차례로 section p는 조상에 section이 있는 '밥 2공기'를 고릅니다. 결합자가 빈칸인 main p라면 둘 다 고릅니다.

자주 틀리는 곳

틀린 생각: 빈칸과 >는 같은 뜻이다 — 둘 다 '안에 든 요소'를 고른다.

<li class="recipe-card">
  <div class="recipe-card-head">
    <h2>떡볶이</h2>
  </div>
</li>

.recipe-card > h2 {
  color: #005bb5;
}

카드 제목을 칠하려 했는데 색이 하나도 안 닿습니다. h2는 카드의 손자라 >로는 못 고릅니다.

맞는 규칙: 빈칸은 몇 겹 안이든(후손), >는 바로 한 겹 안(자식)만 고릅니다. 사이에 요소가 끼면 >는 닿지 않습니다(브라우저 규칙 4).

틀린 생각: 선택자 목록에서 쉼표 하나쯤 빠져도 줄이 나뉘어 있으니 괜찮다.

<h1>김치볶음밥</h1>
<h2>재료</h2>

h1
h2 {
  color: #005bb5;
}

CSS는 줄바꿈을 빈칸으로 읽습니다. 쉼표가 빠진 h1 · h2는 하위 선택자 h1 h2가 되어 'h1 안의 h2'를 찾습니다. 그런 요소가 없어 둘 다 검정입니다.

맞는 규칙: 선택자 목록은 쉼표로 가릅니다. 쉼표가 빠지면 빈칸 결합자가 되어 뜻이 바뀝니다(브라우저 규칙 4).

틀린 생각: +는 그 뒤에 오는 형제를 모두 고른다.

<h2>재료</h2>
<p>밥 2공기</p>
<p>김치 1컵</p>

h2 + p {
  color: #005bb5;
}

h2 바로 뒤의 '밥 2공기' 하나만 고릅니다. '김치 1컵'도 h2의 형제이지만 바로 뒤가 아닙니다.

맞는 규칙: +는 바로 뒤 형제 하나만 고릅니다. 앞 형제도, 둘째 뒤 형제도 고르지 않습니다(브라우저 규칙 4).

틀린 생각: 닫는 중괄호가 빠지면 그 규칙만 망가진다.

<h1>김치볶음밥</h1>
<h2>재료</h2>

h1 {
  color: #005bb5;

h2 {
  color: #6e6e73;
}

h1 규칙이 닫히지 않아 h2 규칙이 그 안으로 들어갔습니다. 규칙 안의 규칙(중첩 규칙)은 'h1 안의 h2'를 고릅니다 — 하위 선택자 h1 h2와 같은 뜻입니다. 이 페이지의 h2는 h1 밖이라 회색이 닿지 않습니다.

맞는 규칙: 아래 규칙이 '그 안의 요소'에만 먹으면 위 규칙의 닫는 중괄호부터 봅니다. 여는 {마다 닫는 }가 짝을 이루는지 셉니다. 이 과목은 중첩 규칙을 쓰지 않습니다.

확인 문제

1. 예제의 본문에 아래 CSS 하나만 씁니다. 1번 줄의 빈칸을 +로 바꿔 section + p로 쓰면 파랑이 되는 요소를 모두 고르세요. 기호를 다 쓰세요.

<main>
  <h1>김치볶음밥</h1>
  <section>
    <h2>재료</h2>
    <p>밥 2공기</p>
  </section>
  <p>15분이면 됩니다.</p>
</main>

section p {
  color: #005bb5;
}

• ㉠ h1 김치볶음밥
• ㉡ h2 재료
• ㉢ p 밥 2공기
• ㉣ p 15분이면 됩니다.
• ㉤ 없음

<main>
  <h1>김치볶음밥</h1>
  <section>
    <h2>재료</h2>
    <p>밥 2공기</p>
  </section>
  <p>15분이면 됩니다.</p>
</main>

section + p {
  color: #005bb5;
}

<main>
  <h1>김치볶음밥</h1>
  <section>
    <h2>재료</h2>
    <p>밥 2공기</p>
  </section>
  <p>15분이면 됩니다.</p>
</main>

 {
  color: #005bb5;
}

2. 글 맨 아래 문단(article의 자식 p)만 회색으로 칠하려 합니다. ____ 자리에 결합자 하나를 쓰세요.

<article>
  <h1>김치볶음밥</h1>
  <section>
    <p>밥과 김치를 볶습니다.</p>
  </section>
  <p>2인분 기준입니다.</p>
</article>

article ____ p {
  color: #6e6e73;
}

<article>
  <h1>김치볶음밥</h1>
  <section>
    <p>밥과 김치를 볶습니다.</p>
  </section>
  <p>2인분 기준입니다.</p>
</article>

article > p {
  color: #6e6e73;
}

3. 동아리 공지 페이지의 CSS에서 닫는 중괄호 하나가 빠졌습니다. 파랑으로 칠해지는 요소를 모두 고르세요. 기호를 다 쓰세요.

<h2>신입 모집</h2>
<div class="notice">
  <h2>준비물</h2>
  <p>운동화를 챙겨 오세요.</p>
</div>

.notice {
  color: #6e6e73;

h2 {
  color: #005bb5;
}

• ㉠ h2 신입 모집
• ㉡ div 안 h2 준비물
• ㉢ p 운동화를 챙겨 오세요.
• ㉣ 없음

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 자주 틀리는 곳 셋째의 h2 + p 예제를 style 요소로 한 파일에 담아 sibling.html로 저장해 엽니다. +를 빈칸으로 바꿔 h2 p로 쓰면 어떻게 될지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다. 그다음 Elements 패널에서 '밥 2공기' 문단을 골라 Styles 창에 그 규칙이 있는지 봅니다.