!important 대신

!important는 선언 끝에 붙여 그 선언을 이기는 차례의 한 단계 위로 올리는 표시입니다. 붙인 선언은 명시도와 쓴 차례를 보기 전에 이기므로, 안 먹던 선언도 당장은 먹습니다.

그 대가로 그 뒤의 규칙이 이 선언을 이기기 어려워집니다. 할 일 화면에서 삭제 단추 하나만 다르게 칠하려 해도, 앞에서 붙인 !important 때문에 ID 규칙조차 먹지 않습니다. 이 레슨은 !important가 하는 일과 붙이지 않고 고치는 두 길을 보고, 이 단원에서 본 이기는 차례를 한 표로 모읍니다.

그림 준비 중

1싸움을 한 단계 위로 올린다

<div class="todo">
  <button>추가</button>
  <button id="d" class="delete">
    삭제
  </button>
</div>

.todo button {
  background: #f5f5f7;
}

.delete {
  background:
    transparent !important;
}

!important가 없으면 0-1-1인 .todo button이 0-1-0인 .delete를 이겨 삭제 단추가 회색입니다. !important를 붙인 선언은 붙이지 않은 선언과 명시도로 겨루지 않고, 한 단계 위 무리(중요도)에서 먼저 이깁니다. 명시도는 같은 무리 안에서만 견줍니다.

2한 번 붙이면 뒤 규칙도 못 이긴다

1절 코드 끝에 이 규칙을 더해 삭제 단추 하나만 파랗게 하려 합니다.

<div class="todo">
  <button>추가</button>
  <button id="d" class="delete">
    삭제
  </button>
</div>

.todo button {
  background: #f5f5f7;
}

.delete {
  background:
    transparent !important;
}

#d {
  background: #9ac7ff;
}

1-0-0인 #d도 집니다. #d의 선언에는 !important가 없어 아래 무리에 있기 때문입니다. 이기려면 #d에도 !important를 붙여야 하고, 그 뒤에 또 바꾸려면 또 붙여야 합니다. 안 먹을 때마다 붙이면 선언이 모두 위 무리로 올라가, 결국 그 안에서 다시 명시도와 차례로 겨룹니다.

3!important 대신 쓰는 두 길

처음 문제는 .delete가 0-1-1인 .todo button에 진 것이었습니다. 점수로 풀면 !important가 필요 없습니다.

방법 1 — 선택자를 구체적으로. .delete를 .todo .delete(0-2-0)로 쓰면 .todo button을 이깁니다. #d도 다시 먹습니다.

<div class="todo">
  <button class="delete">
    삭제
  </button>
  <button id="d" class="delete">
    삭제
  </button>
</div>

.todo button {
  background: #f5f5f7;
}

.todo .delete {
  background: transparent;
}

#d {
  background: #9ac7ff;
}

방법 2 — 같은 점수면 아래로. .delete를 button.delete(0-1-1)로 쓰면 .todo button과 점수가 같아지고, 아래에 두어 나중이 되므로 이깁니다. 공통 규칙은 위에, 구역 규칙은 아래에 두는 차례를 지킬 때 쓰는 길입니다.

<div class="todo">
  <button class="delete">
    삭제
  </button>
</div>

.todo button {
  background: #f5f5f7;
}

button.delete {
  background: transparent;
}

4이기는 차례 한 표

이 단원에서 본 판가름을 차례대로 모읍니다. 위 칸에서 갈리면 아래 칸은 보지 않습니다.

자료에 따라 이 차례 전체를 캐스케이드(cascade)라고 부릅니다. 규칙을 층(@layer)으로 묶으면 1과 3 사이에 단계가 하나 더 들지만, 이 과목에서는 쓰지 않습니다.

예제

고른 필터 단추의 글자가 사라졌다

'전체' 단추를 고르면 진한 파랑에 흰 글자가 되어야 하는데, 흰 바탕에 흰 글자라 글자가 보이지 않습니다.

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

.filters button {
  background:
    #ffffff !important;
}

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

찾는 차례대로 봅니다.

1. 파일이 닿았나: 글자가 흰색으로 바뀌었으니 CSS는 닿았습니다.
2. 요소가 나무에 있나: '전체' 단추가 있습니다.
3. 규칙이 닿았나: '전체'를 고르면 Styles 창에 .filters button.active 규칙이 보입니다.
4. 이겼나: 그 규칙의 background에 취소선이 있고, 아래 .filters button의 background에 !important가 붙어 있습니다.

4번에서 찾았습니다. !important를 지우면 0-2-1인 .filters button.active⁠가 0-1-1을 이겨 파랑 바탕이 됩니다(3절 방법 1과 같은 점수 셈).

자주 틀리는 곳

틀린 생각: 안 먹을 때마다 !important를 붙이면 된다.

2절처럼 붙인 선언은 뒤의 ID 규칙도 이겨, 다음에 고칠 때 또 붙이게 됩니다. 붙인 선언끼리는 다시 명시도와 차례로 겨룹니다.

맞는 규칙: 먼저 손 점수판으로 어디서 졌는지 찾고, 선택자를 구체적으로 쓰거나 같은 점수면 아래로 옮깁니다.

틀린 생각: 공통 규칙은 맨 아래에 두어야 다 먹는다.

<div class="filters">
  <button class="active">
    전체
  </button>
</div>

button.active {
  background: #005bb5;
}

.filters button {
  background: #f5f5f7;
}

두 선택자 모두 0-1-1이라, 아래에 둔 공통 .filters button이 이겨 고른 단추의 파랑이 사라집니다.

맞는 규칙: 공통 규칙은 위에, 이겨야 할 구역 규칙은 아래에 둡니다(브라우저 규칙 5).

틀린 생각: 이기는 차례는 명시도부터 본다.

기본 스타일의 body 규칙(0-0-1)은 우리 * 규칙(0-0-0)보다 점수가 높아도 집니다(명시도 3절).

맞는 규칙: 출처를 먼저 봅니다. 기본 스타일은 같은 속성의 우리 규칙에 늘 집니다.

확인 문제

1. 아래 CSS 2번 줄에서 !important를 지우면 '조리 15분' 문단의 글자색은 무엇이 될까요? 코드에 적힌 꼴로 쓰세요.

<p class="note">조리 15분</p>
<div class="note">2인분</div>

.note {
  color: #6e6e73 !important;
}

p.note {
  color: #d70015;
}

<p class="note">조리 15분</p>
<div class="note">2인분</div>

.note {
  color: #6e6e73;
}

p.note {
  color: #d70015;
}

<p class="note">조리 15분</p>
<div class="note">2인분</div>

.note {
  color: ;
}

p.note {
  color: #d70015;
}

2. 이기는 차례입니다. 넷의 차례가 섞였습니다. 먼저 보는 것부터 기호를 늘어놓으세요.

• ㉠ 명시도
• ㉡ 닿는 선언이 없으면 물려받기 · 처음 값
• ㉢ 출처 · 중요도
• ㉣ 나중에 쓴 쪽

3. 동아리 공지입니다. 두 선언에 모두 !important가 붙어 있습니다. 공지 문단의 글자색은 무엇일까요? 코드에 적힌 꼴로 쓰세요.

<p id="notice" class="alert">
  모임 장소가 바뀌었습니다.
</p>

#notice {
  color: #1d1d1f !important;
}

.alert {
  color: #d70015 !important;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 2절 예제를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). 개발자 도구에서 삭제 단추를 고르면 Styles 창의 #d 규칙 background에 취소선이 있는 것을 찾습니다. 그다음 .delete 규칙의 !important를 지우면 삭제 단추 배경이 어떻게 될지 먼저 적고, 저장한 뒤 새로고침합니다.