조건 겹치기와 속성 선택자

조건 겹치기는 선택자 조각을 빈칸 없이 붙여 써서 '한 요소가 모두 갖춘 조건'으로 고르는 꼴이고, 속성 선택자는 대괄호([type="text"])로 HTML 속성과 그 값을 보고 고르는 꼴입니다. 둘 다 고르는 범위를 좁힙니다.

필터 단추 셋 가운데 지금 고른 하나만, 폼 칸 가운데 글자 칸만 꾸미려면 태그나 클래스 하나로는 넓습니다. 조건을 겹치면 좁힐 수 있는데, 붙여 쓸 곳에 빈칸 하나가 들어가면 뜻이 '안쪽 요소'로 바뀌어 아무것도 고르지 않게 됩니다. 이 레슨은 그 빈칸 하나를 가려 읽습니다.

<div class="filters">  <button class="active">    전체  </button>  <button>진행 중</button>  <button>완료</button></div>

1붙여 쓰면 같은 요소의 조건

태그 이름과 클래스를 빈칸 없이 붙이면 '그 태그이면서 그 클래스인 요소'를 고릅니다.

<p class="badge">한식</p>
<span class="badge">20분</span>
<span>2인분</span>

span.badge {
  color: #005bb5;
}

.badge만 쓰면 p까지 둘, span만 쓰면 '2인분'까지 둘입니다. 붙여 쓴 span.badge는 두 조건을 다 갖춘 '20분' 하나입니다. 이렇게 조건을 붙여 쓰는 것을 조건 겹치기(자료에 따라 복합 선택자)라고 부릅니다. 클래스 둘도 붙입니다 — .badge.new는 두 이름이 모두 든 요소입니다.

2빈칸 하나가 바꾸는 뜻

할 일 화면의 필터 단추는 지금 고른 단추에만 active 클래스가 붙습니다.

<div class="filters">
  <button class="active">
    전체
  </button>
  <button>진행 중</button>
  <button>완료</button>
</div>

.filters button.active {
  color: #005bb5;
}

.filters와 button 사이의 빈칸은 하위 선택자, button.active는 붙여 쓴 조건입니다. '.filters 안의 단추 가운데 active인 것'이라 '전체' 하나를 고릅니다.

.active 앞에 빈칸이 하나 들면 단추 안에서 active인 요소를 찾습니다. 단추 안에는 글뿐이라 아무것도 고르지 않고, 오류도 없습니다(브라우저 규칙 4).

3속성 선택자 — 대괄호로 HTML 속성을 본다

대괄호는 HTML에 적힌 속성과 값으로 고릅니다. 같은 input이라도 type이 다르면 가를 수 있습니다.

<label for="nick">이름</label>
<input id="nick" type="text" />
<input id="yes" type="radio" />
<label for="yes">네</label>

input[type="text"] {
  background-color: #f5f5f7;
}

input[type="text"]는 input이면서 type 값이 text인 이름 칸만 고르고 라디오는 뺍니다. 속성 선택자도 조건이라 태그에 붙여 씁니다. 값 없이 [hidden]처럼 쓰면 그 속성이 있는 요소를 모두 고릅니다. 속성 선택자는 자료에 따라 특성 선택자라고도 부릅니다.

data-로 시작하는 속성은 HTML이 정해 두지 않은 이름을 우리가 붙이는 자리입니다. 할 일 화면의 필터 단추는 data-filter="done"처럼 어떤 줄을 보일지 적어 두고, 자바스크립트 과목은 [data-id="2"] 같은 속성 선택자로 요소를 찾습니다.

예제

할 일 화면 읽기 — 고를 요소를 선택자로

할 일 화면을 줄인 꼴입니다. 끝낸 줄과 '완료' 필터 단추를 고릅니다.

<ul>
  <li>우유 사기</li>
  <li class="done">책 읽기</li>
</ul>
<button data-filter="done">
  완료
</button>

li.done {
  color: #6e6e73;
}

[data-filter="done"] {
  font-weight: bold;
}

• 끝낸 줄: li이면서 done 클래스 — 붙여 써서 li.done입니다. li만 쓰면 '우유 사기'까지 칠합니다.
• '완료' 필터 단추: 클래스가 없고 data-filter 값이 done입니다 — 대괄호로 [data-filter="done"]을 씁니다.
• 실제 할 일 화면은 끝낸 줄 안의 할 일 글만 흐리게 하려고 .done .text(하위 선택자)를 씁니다. 빈칸이 있고 없음이 그대로 뜻입니다.

자주 틀리는 곳

틀린 생각: type을 안 써도 글자 칸으로 그려지니 input[type="text"]가 고른다.

<label for="nick">이름</label>
<input id="nick" />

input[type="text"] {
  background-color: #f5f5f7;
}

type이 없는 input도 글자 칸으로 그려집니다. 그러나 대괄호는 HTML에 적힌 속성을 보는데, 이 칸에는 type 속성이 없어 고르지 않습니다.

맞는 규칙: 속성 선택자는 그려진 모양이 아니라 HTML에 적힌 속성으로 고릅니다. 글자 칸에도 type="text"를 적습니다(브라우저 규칙 4).

틀린 생각: .active는 이름에 active가 든 '진행 중' 필터 단추를 고른다.

<div class="filters">
  <button class="active">
    전체
  </button>
  <button data-filter="active">
    진행 중
  </button>
</div>

.active {
  color: #005bb5;
}

점은 class만 봅니다. class="active"는 '지금 고른 단추'라는 표시이고, data-filter="active"는 '진행 중인 줄을 보여라'라는 분류 값입니다. 글자가 같아도 다른 속성입니다.

맞는 규칙: 점은 class에 든 이름을, 대괄호는 그 속성의 값을 고릅니다. 진행 중 단추는 [data-filter="active"]⁠로 고릅니다(브라우저 규칙 4).

틀린 생각: 대괄호 안 따옴표 하나쯤 빠져도 그 규칙만 안 먹는다.

<input id="nick" type="text" />
<p>이름을 쓰세요.</p>

input[type="text] {
  color: #005bb5;
}

p {
  color: #6e6e73;
}

닫는 따옴표가 빠지자 뒤의 p 규칙까지 먹지 않았습니다. 브라우저는 따옴표가 닫히지 않은 대괄호를 끝까지 열린 것으로 읽어, 그 뒤 CSS를 모두 이 선택자의 일부로 보고 함께 버립니다.

맞는 규칙: 대괄호 안 따옴표는 짝을 맞춥니다. 짝이 빠지면 그 뒤 규칙까지 버려질 수 있습니다(브라우저 규칙 4).

확인 문제

1. 예제의 CSS에서 li.done 사이에 빈칸을 넣어 li .done으로 바꿨습니다. 회색이 되는 요소를 모두 고르세요. 기호를 다 쓰세요.

<ul>
  <li>우유 사기</li>
  <li class="done">책 읽기</li>
</ul>

li .done {
  color: #6e6e73;
}

• ㉠ ul
• ㉡ li 우유 사기
• ㉢ li 책 읽기
• ㉣ 없음

<ul>
  <li>우유 사기</li>
  <li class="done">책 읽기</li>
</ul>

 {
  color: #6e6e73;
}

2. 라디오 칸만 고르려 합니다. ____ 자리를 채우세요.

<label for="nick">이름</label>
<input id="nick" type="text" />
<input id="yes" type="radio" />
<label for="yes">네</label>

input[____] {
  accent-color: #005bb5;
}

<label for="nick">이름</label>
<input
  id="nick"
  type="text"
/>
<input
  id="yes"
  type="radio"
/>
<label for="yes">네</label>

input[type="radio"] {
  accent-color: #005bb5;
}

3. 플로우 카페 메뉴판입니다. 파랑으로 칠해지는 요소를 모두 고르세요. 기호를 다 쓰세요.

<ul>
  <li class="hot new">유자차</li>
  <li class="hot">라테</li>
  <li class="new">마들렌</li>
</ul>

.hot.new {
  color: #005bb5;
}

• ㉠ li 유자차
• ㉡ li 라테
• ㉢ li 마들렌
• ㉣ 없음

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절 예제를 style 요소로 한 파일에 담아 compound.html로 저장해 엽니다. CSS의 span.badge 사이에 빈칸을 넣어 span .badge로 쓰면 어떻게 될지 먼저 적고, 저장하고 새로고침해 맞춰 봅니다.