!important
선언
CSS 스타일을 지정할 때 가끔 어떤 속성(Property)은 아주 중요해서 다른 속성보다 우선시해야 할 때가 있습니다.
이럴 경우 !important
키워드를 사용하면 일반적인 property: value;
보다 해당 선언이 중요하다는 것을 표시합니다.
CSS에서는 이것을 important 선언이라고 부르고 선택자의 속성과 값을 선언의 끝에 나타내는 세미꼴론(;
) 앞에 !important
를 추가해서 property: value !mportant;
처럼 표현합니다.
이렇게 속성의 값에 !important
가 선언되면 CSS 스타일 우선순위 규칙을 변경하여 일반적으로 선언한 속성의 값 보다 우선권이 부여되어 우선적으로 선택됩니다.
사전에 필요로 하는 지식
CSS에서 일반적으로 선언된 스타일 우선순위 규칙을 이해하고 있으면 !important
선언이 CSS 스타일 우선순위 규칙을 변경하여 일반적으로 선언한 속성의 값 보다 우선권이 부여되어 우선적으로 선택된다는 것에 대해 좀 더 쉽게 이해할 수 있습니다.
스타일 적용 우선 순위의 우선권 부여하기
<style>
#myid {
background-color: red;
}
.important-background {
background-color: yellowgreen !important; /* !important 선언 */
}
</style>
<p id="myid" class="important-background">
CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>
CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
위의 데모 예시를 통해 확인할 수 있듯이 #myid
선택자의 스타일 우선순위가 .important-background
보다 높지만 background-color
속성의 값은 yellowgreen
로 처리됩니다.
!important
가 선언되면 CSS 스타일 우선순위 규칙을 변경하여 일반적으로 선언한 속성의 값 보다 우선권이 부여되기 때문입니다.
참고 사항
!important
선언을 사용할 때 참고할 만한 사항입니다.
!important
의 !
다음의 important
띄어쓰기 - ! important
!important
의 !
다음의 important
띄어쓰기, 즉 공백의 추가는 허용됩니다. ! important
처럼 띄어쓰기는 허용되지만 일반적으로는 띄어쓰기를 하지 않습니다.
!important
를 선언했을 경우에는 그 이유를 주석으로 설명
!important
를 선언했을 경우에는 그 이유를 주석으로 설명하는 것이 좋습니다. 주석으로 설명한다면, CSS 코드를 향 후에 이해하는데 도움이 됩니다.
.important-background {
background-color: yellowgreen !important; /* 이 배경색은 변경되지 말아야 합니다. */
}
주의할 점
!important
를 선언할 경우 몇 가지 주의해야 할 점이 있습니다.
!important
선언을 동일한 속성에 여러 번 지정했을 경우
<style>
#myid { /* 구체성 값 = 0,1,0,0 */
background-color: red !important;
}
.important-background { /* 구체성 값 = 0,1,0,0 */
background-color: yellowgreen !important;
}
</style>
<p id="myid" class="important-background">
CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>
CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
위 데모 예시처럼 동일한 요소의 동일한 속성에 여러 번 !important
선언을 했을 경우에는 동일한 우선권이 부여되기 때문에 CSS 스타일 우선순위 규칙이 적용됩니다. 즉, 구체성의 값이 높은 선택자의 속성 값이 적용됩니다.
일반선언과 !important
로 표시된 선언들은 특별한 구체성을 갖지 않지만, 이 표시가 없은 선언들과는 별개로 다루어집니다. 실제로 !important
선언은 !important
선언들끼리, 이 표시가 없는 일반 선언은 일반 선언들기리 구체성이 경정됩니다. 따라서, !important
선언과 일반적인 선언이 충돌할 때에는 !important
선언이 우선권을 갖습니다.
@keyframes
블록 내에서 사용 금지
@keyframes
블록 내에서 !important
선언은 유효하지 않습니다. 다음의 예시 코드로 살펴보겠습니다.
<style>
.important-background {
animation: bg-animation 3s infinite both;
}
@keyframes bg-animation {
0% {
background-color: red !important;
}
100% {
background-color: yellowgreen;
}
}
</style>
<p class="important-background">
CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>
CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
위 예시 코드를 보면 @keyframes
블록 내에서 background-color: red !important;
를 사용했습니다. 이럴 경우 !important
선언은 유효하지 않기 때문에 background-color: red
가 아예 적용되지 않습니다. 이는 background-color
의 값이 red important
처럼 작동하여 유효하지 않는 값으로 처리되기 때문입니다.
따라서 위 예시 코드의 경우 100%
에서의 background-color: yellowgreen;
만 적용됩니다.
단축 표현 속성을 사용했을 경우
다음의 코드 예시를 통해 살펴보겠습니다.
<style>
.important-background {
border: 2px solid red !important;
}
.important-background:hover {
border-color: blue; /* 작동하지 않음 */
}
</style>
<p class="important-background">
CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>
hover
해 보세요.
border-color: blue;
가 작동하지 않습니다.
CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
위 코드 예시를 보면 border: 2px solid red !important;
는 다음의 하위 속성들을 모두 !important
로 선언한 것과 동일합니다.
border-width: 2px !important;
border-style: solid !important;
border-color: red !important;
따라서, 마우스를 올려 hover
했을 경우 지정한 border-color: blue;
는 작동하지 않습니다. 이는 마치 다음의 코드와도 같은 것입니다.
<style>
.important-background {
/* border: 2px solid red !important; */
border-width: 2px !important;
border-style: solid !important;
border-color: red !important;
}
.important-background:hover {
border-color: blue; /* 작동하지 않음 */
}
</style>
<p class="important-background">
CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>
!important
선언은 언제 하는 것이 좋을까요?
- 인라인 스타일을 재정의할 때 유용합니다.
- 특히, JavaScript로 CSS를
style
속성으로 정의 할 때는 인라인 스타일로 적용되는데, 이럴 경우 JavaScript로도 스타일을 정의하지 못하게 할 때 유용합니다. - 구체성이 높은 규칙을 무시하고 재정의하고 싶을 때 유용합니다.
브라우저 호환성
선언 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
!important
|
예 | 예 | 예 | 예 |
명세서
명세서 사양 | |
---|---|
!important
|
CSS Cascading and Inheritance Level 3 #importance |