실행 가능한 CSS 문서: !important

Q: !important는 어떻게 덮어쓰나요?

명시도가 더 높거나, 명시도가 같고 스타일시트에서 더 뒤에 있는 다른 !important 선언으로 덮어써요. !important를 붙인 인라인 style은 스타일시트의 모든 !important를 이겨요.

Q: !important가 인라인 스타일을 이기나요?

네. !important를 붙인 스타일시트 선언은 style 속성의 일반 선언을 이겨요. 인라인 선언에도 !important가 붙어 있으면 이기지 못해요.

Q: !important를 쓰는 건 나쁜 습관인가요?

명시도 싸움에서 이기려고 쓰면 그래요. 다음 덮어쓰기에도 !important가 필요해지고 스타일시트를 고치기 어려워져요. 항상 적용되어야 하는 유틸리티 클래스(.hidden 같은), 서드파티 인라인 스타일 덮어쓰기, 사용자 스타일시트에는 쓸 만해요.

!important가 하는 일

값 뒤에 !important를 붙이면 그 선언이 같은 요소의 같은 속성에 대한 모든 일반 선언을 이겨요. 선택자 명시도와 코드 순서는 더 이상 상관없어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>!important</title>
  <style>
    #intro { color: #2563eb; }           /* ID: very specific */
    .warning { color: #f59e0b !important; } /* class, but important */
  </style>
</head>
<body>
  <p id="intro" class="warning">Amber: !important beats the ID selector.</p>
</body>
</html>

!important가 없으면 ID 선택자가 이겨서 글자가 파란색이 돼요. 에디터에서 !important를 지워 보세요.

문법

selector {
  property: value !important;
}

값 뒤, 세미콜론 앞에 써요. 규칙 전체가 아니라 그 선언 하나에만 적용돼요. 단축 속성에서도 동작하고(margin: 0 !important;는 네 방향 모두를 important로 만들어요), style 속성에서도 동작해요.

무엇이 무엇을 이기나

페이지 작성자가 쓴 스타일을 약한 것부터 강한 것 순으로 나열하면 이래요.

순위	선언	예시
1	스타일시트의 일반 선언	`p { color: blue; }`
2	`style` 속성의 일반 선언	`<p style="color: blue">`
3	스타일시트의 `!important`	`p { color: blue !important; }`
4	`style` 속성의 `!important`	`<p style="color: blue !important">`

같은 순위 안에서는 명시도가 결정하고, 그다음은 선언이 나오는 순서예요. 나중 것이 이겨요.

일상에서 !important를 정당하게 쓰는 경우가 바로 이거예요. 서드파티 위젯이 적은 인라인 스타일처럼 직접 고칠 수 없는 인라인 스타일을 덮어쓸 때요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Beat inline</title>
  <style>
    .widget { background: #16a34a !important; }
    .widget-plain { background: #16a34a; }
    div { color: white; padding: 10px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="widget" style="background: #2563eb;">Green: stylesheet !important beats inline.</div>
  <div class="widget-plain" style="background: #2563eb;">Blue: a normal rule loses to inline.</div>
</body>
</html>

두 선언 모두 !important일 때

!important끼리 붙으면 보통의 규칙으로 돌아가요. 명시도가 높은 쪽이 이기고, 동점이면 나중 선언이 이겨요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Two important</title>
  <style>
    p { padding: 8px; color: white; }
    .card p { background: #2563eb !important; }  /* (0,1,1) */
    p.note { background: #f59e0b !important; }  /* (0,1,1), later */
    p { background: #16a34a !important; }       /* (0,0,1) */
  </style>
</head>
<body>
  <div class="card"><p class="note">Amber: same specificity, later rule.</p></div>
  <p>Green: only the type rule matches.</p>
</body>
</html>

!important는 이렇게 번져요. 한 규칙이 쓰기 시작하면 그 규칙을 덮어써야 하는 규칙도 써야 하고, 명시도는 다시 올라가기 시작해요.

표 하나로 보는 CSS 명시도

명시도는 선택자의 무게예요. 숫자 세 개를 세요.

칸	세는 것	예시 선택자	명시도
A	ID 선택자	`#nav`	(1,0,0)
B	클래스, 속성, 가상 클래스	`.btn`, `[type="text"]`, `:hover`	각각 (0,1,0)
C	타입 선택자, 가상 요소	`p`, `::before`	각각 (0,0,1)
없음	`*`, 결합자 (`>`, `+`, `~`, 공백)	`*`, `ul > li`	더하지 않아요

A 칸을 먼저 비교하고, 동점일 때만 B, 그다음 C를 봐요. 그래서 #nav a(1,0,1)가 .menu .item .link a(0,3,1)를 이겨요. ID 하나가 클래스 몇 개보다도 무거워요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #nav a { color: #16a34a; }                /* (1,0,1) wins */
    .menu .item .link a { color: #f59e0b; }  /* (0,3,1) */
    a { color: #2563eb; }                     /* (0,0,1) */
  </style>
</head>
<body>
  <nav id="nav" class="menu">
    <div class="item"><span class="link"><a href="#">Green link</a></span></div>
  </nav>
</body>
</html>

이 표를 이해하면 !important를 피할 수 있어요. "CSS가 적용이 안 돼요" 문제는 대부분 다른 곳의 더 구체적인 규칙 때문이고, DevTools의 Styles 패널에서 내 선언에 취소선이 그어진 모습으로 확인할 수 있어요.

더 깔끔한 대안

명시도를 맞추고 순서에 맡기기. 내 스타일시트를 라이브러리 뒤에 불러오고, 최소한 같은 명시도의 선택자를 쓰세요.
:where()로 상대 규칙의 명시도 낮추기. :where() 안의 모든 것은 0으로 계산돼서, 이걸로 쓴 기본 스타일은 덮어쓰기 쉬워요.
CSS 변수를 연결 고리로 쓰기. var(--btn-bg)를 읽는 컴포넌트는 선택자와 싸우지 않고 테마를 바꿀 수 있어요. CSS 변수를 참고하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>where</title>
  <style>
    /* base styles with zero specificity */
    :where(#app .panel) { background: #e5e7eb; padding: 10px; }

    /* a plain class is enough to override */
    .highlight { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="app">
    <div class="panel">Gray base style.</div>
    <div class="panel highlight">Amber, no !important needed.</div>
  </div>
</body>
</html>

JavaScript로 !important 설정하기

element.style.color = 'red !important'는 동작하지 않아요. 값이 잘못돼서 무시돼요. 세 번째 인수와 함께 setProperty를 쓰세요.

el.style.setProperty('color', '#f59e0b', 'important');

자주 하는 실수

잘못된 위치에 쓰기. color: !important red;는 잘못된 코드예요. 값 뒤에 써야 해요.
@keyframes 안에서 쓰기. keyframes 안에서 !important를 붙인 선언은 무시돼요.
모든 충돌을 이걸로 해결하기. DevTools에서 이기고 있는 규칙을 찾아 명시도를 맞추거나 낮추세요.
다른 속성에도 효과가 있다고 기대하기. color: red !important는 background에 아무 영향도 없어요.
인라인 !important가 내 규칙을 이긴다는 걸 잊기. 페이지 스타일시트의 어떤 규칙도 style="color: red !important"를 덮어쓸 수 없어요. JavaScript 등으로 속성 자체를 바꾸세요.

자주 묻는 질문

CSS에서 !important는 무엇을 하나요?

같은 요소의 같은 속성에 대한 모든 일반 선언보다 그 선언 하나를 우선하게 만들어요. 선택자 명시도나 순서는 상관없어요. 값 뒤에 적어요. color: red !important;

!important는 어떻게 덮어쓰나요?

명시도가 더 높거나, 명시도가 같고 스타일시트에서 더 뒤에 있는 다른 !important 선언으로 덮어써요. !important를 붙인 인라인 style은 스타일시트의 모든 !important를 이겨요.

!important가 인라인 스타일을 이기나요?

네. !important를 붙인 스타일시트 선언은 style 속성의 일반 선언을 이겨요. 인라인 선언에도 !important가 붙어 있으면 이기지 못해요.

!important를 쓰는 건 나쁜 습관인가요?

명시도 싸움에서 이기려고 쓰면 그래요. 다음 덮어쓰기에도 !important가 필요해지고 스타일시트를 고치기 어려워져요. 항상 적용되어야 하는 유틸리티 클래스(.hidden 같은), 서드파티 인라인 스타일 덮어쓰기, 사용자 스타일시트에는 쓸 만해요.

CSS 명시도는 어떻게 계산하나요?

세 칸을 세요. ID 선택자, 그다음 클래스, 속성, 가상 클래스, 그다음 타입 선택자와 가상 요소예요. 앞 칸부터 차례로 비교하기 때문에 #nav a(1,0,1)가 .menu .item a(0,2,1)를 이겨요. 전체 선택자 *와 결합자는 아무것도 더하지 않아요.