나중에 쓴 규칙

나중에 쓴 규칙이 이긴다는 것은 출처와 명시도까지 같은 선언끼리의 마지막 판가름입니다. 점수가 같으면 브라우저는 CSS에 쓴 차례에서 뒤에 있는 선언을 씁니다.

할 일 화면의 필터 단추는 마우스를 올리면 배경이 회색이 되어야 합니다. 그런데 규칙 둘의 자리를 바꾸기만 해도 색이 바뀌지 않게 됩니다. 앞 레슨에서는 명시도가 다르면 차례와 상관없이 높은 쪽이 이겼습니다. 이 레슨은 명시도가 같을 때 쓴 차례가 결과를 정하는 모습과, CSS 파일이 둘일 때의 차례를 봅니다.

그림 준비 중

1명시도까지 같으면 나중

명시도에서 이은 규칙에 마지막 문장을 붙입니다.

브라우저 규칙 5. 명시도까지 같으면 나중에 쓴 쪽이 이깁니다.

<div class="recipe-card">
  <span class="badge">한식</span>
</div>

span.badge {
  color: #005bb5;
}

.recipe-card span {
  color: #d70015;
}

두 선택자는 모양이 달라도 명시도가 0-1-1로 같습니다. 그래서 뒤에 쓴 .recipe-card span의 빨강이 이깁니다. 두 규칙의 자리를 바꾸면 결과도 파랑으로 뒤집힙니다.

2마우스를 올린 상태도 같은 셈

:hover처럼 상태로 고르는 가상 클래스는 그 상태일 때만 닿고(마우스와 키보드 상태), 명시도는 클래스 칸에 하나를 셉니다. button:hover는 0-1-1입니다.

<div class="filters">
  <button>전체</button>
  <button>남은 일</button>
</div>

.filters button {
  background: #ffffff;
}

button:hover {
  background: #d2d2d7;
}

잰 값은 '전체'에 마우스를 올린 뒤의 값입니다. 결과 화면에서도 단추에 마우스를 올려 볼 수 있습니다. 마우스를 올린 단추에는 두 규칙이 모두 닿고, 점수가 같아 뒤에 쓴 button:hover가 이깁니다. 마우스를 떼면 :hover 규칙이 닿지 않아 흰색으로 돌아옵니다.

3CSS 파일이 둘이면 이어 붙인 하나

link를 두 줄 쓰면 브라우저는 두 파일을 따로 셈하지 않습니다. link 차례대로 이어 붙인 한 파일처럼 읽어, 뒤 link의 파일에 있는 규칙이 '나중'입니다.

/* 1. base.css — 앞 link */
.menu li {
  color: #1d1d1f;
}

/* 2. menu.css — 뒤 link */
.menu li {
  color: #005bb5;
}

이 차례면 메뉴 줄은 파랑입니다. link 두 줄의 차례를 바꾸면 base.css가 뒤가 되어 검정으로 뒤집힙니다. 같은 파일 안 style 요소도 문서에 나온 자리에서 이 줄에 끼어듭니다.

예제

머리글 링크만 마우스를 올려도 그대로

레시피 노트의 모든 링크는 마우스를 올리면 파래져야 합니다. 그런데 머리글의 사이트 이름 링크만 색이 바뀌지 않습니다.

<header class="site-header">
  <a href="index.html">
    레시피 노트
  </a>
</header>

a:hover {
  color: #005bb5;
}

.site-header a {
  color: #1d1d1f;
}

마우스를 올린 사이트 이름 링크의 color를 손 점수판으로 씁니다.

명시도가 같아 4번 칸(나중)에서 갈렸습니다. 고치는 길은 둘입니다.

• a:hover 규칙을 .site-header a 아래로 옮깁니다. 이제 a:hover가 나중입니다.
• 선택자를 .site-header a:hover(0-2-1)로 씁니다. 이 규칙은 자리와 상관없이 이깁니다.

자주 틀리는 곳

틀린 생각: CSS 파일이 둘이면 파일마다 따로 계산된다.

3절처럼 두 파일에 같은 점수의 규칙이 있으면, 뒤 link의 파일 규칙이 이깁니다. '메뉴 전용 파일이니 이긴다'는 차례가 없습니다.

맞는 규칙: 브라우저는 link 차례대로 이어 붙인 한 파일을 읽습니다. 공통 파일을 앞에, 이겨야 할 파일을 뒤에 잇습니다.

틀린 생각: :hover가 붙은 규칙은 늘 이긴다.

<nav id="menu">
  <a href="index.html">목록</a>
</nav>

a:hover {
  color: #d70015;
}

#menu a {
  color: #1d1d1f;
}

마우스를 올려도 빨개지지 않습니다. a:hover는 0-1-1이고 #menu a는 1-0-1이라 ID 칸에서 집니다.

맞는 규칙: 가상 클래스도 클래스 한 칸일 뿐입니다. 명시도를 먼저 견주고, 같을 때만 차례를 봅니다(브라우저 규칙 5).

틀린 생각: 안 먹는 규칙은 맨 아래로 옮기면 된다.

옮긴 규칙이 같은 점수의 다른 규칙까지 이겨, 고친 곳 대신 다른 곳이 뒤집힙니다.

맞는 규칙: 공통 규칙을 위에, 구역 규칙을 아래에 두는 차례를 정해 지킵니다. 차례를 흔들지 않고 고치는 길은 !important 대신에서 봅니다.

확인 문제

1. 아래 CSS 1번 줄의 선택자를 li로 바꾸면 재료 줄의 글자색은 무엇이 될까요? 코드에 적힌 꼴로 쓰세요.

<ul class="ingredient-list">
  <li>밥 2공기</li>
</ul>

.ingredient-list li {
  color: #1d1d1f;
}

li {
  color: #6e6e73;
}

<ul class="ingredient-list">
  <li>밥 2공기</li>
</ul>

li {
  color: #1d1d1f;
}

li {
  color: #6e6e73;
}

<ul class="ingredient-list">
  <li>밥 2공기</li>
</ul>

 {
  color: #1d1d1f;
}

li {
  color: #6e6e73;
}

2. 동아리 공지의 날짜 글자색을 손 점수판으로 찾습니다. ㉠ · ㉡ · ㉢ 자리에 쓰세요.

<div class="notice">
  <p class="date">10월 20일</p>
</div>

p.date {
  color: #6e6e73;
}

.notice p {
  color: #1d1d1f;
}

3. 플로우 카페 메뉴판입니다. 공통 base.css와 메뉴 전용 menu.css를 아래 차례로 이었습니다. 메뉴 줄의 글자색은 무엇일까요? 코드에 적힌 꼴로 쓰세요.

…
<link
  rel="stylesheet"
  href="menu.css"
/>
<link
  rel="stylesheet"
  href="base.css"
/>

/* menu.css */
.menu li {
  color: #005bb5;
}

/* base.css */
.menu li {
  color: #1d1d1f;
}

<ul class="menu">
  <li>녹차 3500</li>
</ul>

.menu li {
  color: #005bb5;
}

.menu li {
  color: #1d1d1f;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 확인 문제 3의 두 CSS를 base.css · menu.css로 저장하고, 정답 접기의 메뉴 HTML을 문서 뼈대의 body에 넣은 index.html의 head에 link 두 줄을 문제의 차례로 씁니다. 메뉴 줄의 글자색이 확인 문제 3에서 적은 답과 같은지 본 뒤, index.html의 link 두 줄 차례를 바꾸면 어떻게 될지 먼저 적고, 저장한 뒤 새로고침합니다.