상속·명시도·계단식

규칙이 겹칠 때 무엇이 이기는가

한 요소에 여러 규칙이 걸리는 일은 흔합니다. 그때 브라우저는 세 가지를 차례로 따집니다.

1. 상속 — 부모에게서 물려받은 값이 있는가.
2. 명시도 — 어느 선택자가 더 정확히 가리키는가.
3. 차례 — 같으면 나중에 적은 것이 이깁니다.

"CSS 를 적었는데 안 먹는다" 는 일의 대부분이 이 셋으로 설명됩니다.

상속

글자에 관한 속성은 자식에게 저절로 내려갑니다. 상자에 관한 속성은 내려가지 않습니다.

<div class="card">
  <h4>안내</h4>
  <p>색과 줄 간격은 물려받았습니다.</p>
  <p>테두리는 물려받지 않았습니다.</p>
</div>

.card {
  /* 아래 둘은 자식에게 내려갑니다 */
  color: #3b4252;
  line-height: 1.9;

  /* 아래 둘은 내려가지 않습니다 */
  border: 1px solid #d9cff7;
  padding: 14px;
}

가르는 기준은 글자에 관한 것인가입니다. 상자에 관한 것이 내려가면 안쪽마다 테두리가 겹쳐 그려질 것입니다.

명시도

같은 요소에 여러 규칙이 걸리면 더 정확히 가리키는 쪽이 이깁니다. 아래 세 규칙은 모두 같은 문단을 가리킵니다.

<p id="hello" class="greet">어느 색으로 나올까요</p>

/* 셋 다 이 문단을 가리킵니다. 아이디가 이깁니다. */
p       { color: #0b7285; }  /* 태그   — 약함 */
.greet   { color: #6e56cf; }  /* 클래스 — 중간 */
#hello   { color: #d9480f; }  /* 아이디 — 강함 */

여러 개를 이어 적으면 더해집니다. .card p 는 10 + 1 = 11 이라 p 하나(1)보다 강합니다. 그래서 선택자를 길게 적을수록 나중에 덮어쓰기 어려워집니다.

같으면 나중 것이 이깁니다

.btn { background: #6e56cf; }
.btn { background: #0b7285; }  /* 이쪽이 그려집니다 */

파일이 여럿이면 나중에 연결한 파일이 이깁니다. 남의 스타일을 덮어써야 할 때 그 파일을 뒤에 두는 것이 그런 까닭입니다.

!important 를 피하는 까닭

선언 뒤에 !important 를 붙이면 명시도와 상관없이 이깁니다. 당장은 해결되지만 그다음이 문제입니다.

.btn { background: #6e56cf !important; }

/* 이제 이것을 덮어쓰려면 또 !important 가 필요합니다 */
#page .btn { background: #0b7285; }  /* 듣지 않습니다 */

한 번 사용하면 그 자리를 고칠 때마다 다시 필요해지고, 결국 파일 전체가 !important 로 덮입니다. 명시도를 낮추는 쪽으로 푸는 것이 옳습니다 — 선택자를 짧게 적고, 아이디 대신 클래스를 사용하십시오.

세 가지

• 규칙을 적었는데 듣지 않습니다. 대개 더 강한 규칙이 이미 있는 것입니다. 개발자 도구에서 그 요소를 보면 진 규칙에 줄이 그어져 있습니다(5.4).
• 아이디로 스타일을 겁니다. 명시도가 100 이라 나중에 클래스로 덮어쓸 수 없습니다. 꾸미는 일은 클래스로 하십시오.
• !important 로 해결합니다. 그 순간은 끝나지만 다음 사람이 같은 자리를 고칠 수 없게 됩니다.

직접 해보기

#hello { color: #d9480f; }
.greet { color: #6e56cf; }

정리

• 글자에 관한 속성은 자식에게 내려가고, 상자에 관한 것은 내려가지 않습니다.
• 명시도는 태그 1 · 클래스 10 · 아이디 100 · style 속성 1000 입니다.
• 명시도가 같으면 나중에 적은 것이 이깁니다.
• !important 대신 명시도를 낮추는 쪽으로 푸십시오.